@smartnet360/svelte-components 0.0.42 → 0.0.43

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

@@ -3,47 +3,81 @@
 <script lang="ts">
 	import { TreeView, createTreeStore } from '../../core/TreeView';
 	import { ChartComponent,  type Layout, type CellStylingConfig } from '../../core/Charts';
-	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling } from './index';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling, type TreeGroupingConfig, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
-	import { onMount } from 'svelte';
     import type {ChartMarker, Mode } from '../../index.js';
+	import { checkHealth, getMessage } from '../../core/FeatureRegistry';
 
 	interface Props {
 		rawData: CellTrafficRecord[];
-		baseLayout: Layout;
+		multiCellLayout: Layout;         // Layout for multiple cells (also used as fallback)
+		singleLteLayout?: Layout;        // Optional: Layout for single LTE cell
+		singleNrLayout?: Layout;         // Optional: Layout for single NR cell
 		baseMetrics: string[];
         mode: Mode;
 		markers?: ChartMarker[];
 		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)
 	}
 
-	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling }: Props = $props();
+	let { rawData, multiCellLayout, singleLteLayout, singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, showGroupingSelector = true }: Props = $props();
+
+	// Check feature health
+	let isHealthy = $state(checkHealth('sitecheck'));
+
+	// Internal state for current grouping
+	let treeGrouping = $state<TreeGroupingConfig>(initialGrouping);
+
+	// Available grouping presets
+	const groupingPresets = [
+		{ label: 'Site → Azimuth → Cell', value: { level0: 'site', level1: 'azimuth', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Site → Band → Cell', value: { level0: 'site', level1: 'band', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Band → Site → Cell', value: { level0: 'band', level1: 'site', level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Band → Azimuth → Cell', value: { level0: 'band', level1: 'azimuth', level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Azimuth → Site → Cell', value: { level0: 'azimuth', level1: 'site', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Band → Cell', value: { level0: 'band', level1: null, level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Site → Cell (2-level)', value: { level0: 'site', level1: null, level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Azimuth → Cell (2-level)', value: { level0: 'azimuth', level1: null, level2: 'cell' } as TreeGroupingConfig },
+	];
 
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
-	onMount(() => {
-		log('🚀 SiteCheck Initializing', {
-			totalRecords: rawData.length,
-			baseMetrics,
-			mode
-		});
+	// Rebuild tree whenever treeGrouping changes
+	$effect(() => {
 
-		// Build tree nodes from raw data
-		const treeNodes = buildTreeNodes(rawData);
+		log('� Rebuilding tree with grouping', { treeGrouping });
+
+		// Clear any existing localStorage data to prevent stale state
+		const storageKey = 'site-check:treeState';
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem(storageKey);
+			log('🧹 Cleared localStorage:', storageKey);
+		}
+
+		// Build tree nodes from raw data with custom grouping
+		const treeNodes = buildTreeNodes(rawData, treeGrouping);
 		log('🌲 Tree Nodes Built', {
 			nodeCount: treeNodes.length,
-			firstNode: treeNodes[0]
+			firstNode: treeNodes[0],
+			grouping: treeGrouping
 		});
-
+		if(isHealthy === false) {
+			console.log('Configuration Required');
+			return;
+		}
 		// Create tree store
 		treeStore = createTreeStore({
 			nodes: treeNodes,
 			namespace: 'site-check',
-			persistState: true,
+			persistState: false,  // Don't persist when grouping changes dynamically
 			defaultExpandAll: false
 		});
-		log('✅ Tree Store Created', { namespace: 'site-check' });
+		log('✅ Tree Store Created', { 
+			namespace: 'site-check',
+			grouping: treeGrouping 
+		});
 	});
 
 	// Derive chart data from tree selection
@@ -74,10 +108,11 @@
 		return transformed;
 	});
 
-	// Expand layout based on selected cells
+	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		const expanded = expandLayoutForCells(baseLayout, filteredData, cellStyling);
+		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, cellStyling);
 		log('📐 Chart Layout:', {
+			layoutName: selectedBaseLayout.layoutName,
 			sectionsCount: expanded.sections.length,
 			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
 			firstSection: expanded.sections[0],
@@ -100,21 +135,92 @@
 		log('📡 Total Sites:', count);
 		return count;
 	});
+
+	// Detect cell technology (LTE vs NR) for single-cell layout selection
+	let cellTechnology = $derived.by(() => {
+		if (totalCells !== 1) return null;
+		
+		const cell = filteredData[0];
+		const band = cell?.band?.toUpperCase() || '';
+		
+		if (band.startsWith('LTE')) {
+			log('📡 Detected Technology: LTE', { band });
+			return 'LTE';
+		}
+		if (band.startsWith('NR') || band.startsWith('5G')) {
+			log('📡 Detected Technology: NR', { band });
+			return 'NR';
+		}
+		
+		log('📡 Detected Technology: UNKNOWN', { band });
+		return 'UNKNOWN';
+	});
+
+	// Select appropriate layout based on cell count and technology
+	let selectedBaseLayout = $derived.by(() => {
+		// Multiple cells → always use multi-cell layout
+		if (totalCells !== 1) {
+			log('📐 Layout Selection: Multi-cell (count=' + totalCells + ')');
+			return multiCellLayout;
+		}
+		
+		// Single LTE cell → use LTE layout if available, otherwise fallback
+		if (cellTechnology === 'LTE' && singleLteLayout) {
+			log('📐 Layout Selection: Single LTE (optimized)');
+			return singleLteLayout;
+		}
+		
+		// Single NR cell → use NR layout if available, otherwise fallback
+		if (cellTechnology === 'NR' && singleNrLayout) {
+			log('📐 Layout Selection: Single NR (optimized)');
+			return singleNrLayout;
+		}
+		
+		// Fallback to multi-cell layout for single cells (works fine)
+		log('📐 Layout Selection: Multi-cell (fallback for single cell)', { 
+			technology: cellTechnology,
+			lteLayout: !!singleLteLayout,
+			nrLayout: !!singleNrLayout
+		});
+		return multiCellLayout;
+	});
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">
 	<!-- Main Content -->
-	<div class="row flex-grow-1 ">
+	<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 overflow-auto">
-			<div class="p-3">
-				<!-- <h5 class="mb-3">
-					<span class="me-2">📡</span>
-					Site Selection
-				</h5> -->
+		<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>
+			{/if}
 
+			<!-- Tree View -->
+			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
 				{#if treeStore}
-					<TreeView store={$treeStore!} showControls={false} showIndeterminate={true} height="100%" />
+					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
 				{/if}
 			</div>
 		</div>
@@ -133,12 +239,11 @@
 			{:else}
 				<div class="d-flex align-items-center justify-content-center h-100">
 					<div class="text-center text-muted">
-						<div class="mb-3" style="font-size: 4rem;">📊</div>
 						<h5>No Data Selected</h5>
-						<p>Select one or more cells from the tree to display KPI charts.</p>
 					</div>
 				</div>
 			{/if}
 		</div>
 	</div>
 </div>
+

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

@@ -1,13 +1,17 @@
 import { type Layout, type CellStylingConfig } from '../../core/Charts';
-import { type CellTrafficRecord } from './index';
+import { type CellTrafficRecord, type TreeGroupingConfig } from './index';
 import type { ChartMarker, Mode } from '../../index.js';
 interface Props {
     rawData: CellTrafficRecord[];
-    baseLayout: Layout;
+    multiCellLayout: Layout;
+    singleLteLayout?: Layout;
+    singleNrLayout?: Layout;
     baseMetrics: string[];
     mode: Mode;
     markers?: ChartMarker[];
     cellStyling?: CellStylingConfig;
+    initialGrouping?: TreeGroupingConfig;
+    showGroupingSelector?: boolean;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/apps/site-check/data-loader.d.ts

@@ -11,6 +11,25 @@ export interface CellTrafficRecord {
     band: string;
     metrics: Record<string, number>;
 }
+/**
+ * Tree grouping field types
+ */
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+/**
+ * Configuration for tree hierarchy grouping
+ * Defines which fields appear at each level of the tree
+ * - For 3-level tree: level0 → level1 → cell
+ * - For 2-level tree: level0 → cell (set level1 to null)
+ */
+export interface TreeGroupingConfig {
+    level0: TreeGroupField;
+    level1: TreeGroupField | null;
+    level2: 'cell';
+}
+/**
+ * Default tree grouping: Site → Azimuth → Cell (3-level)
+ */
+export declare const defaultTreeGrouping: TreeGroupingConfig;
 /**
  * Load cell traffic data from CSV file
  */

package/dist/apps/site-check/data-loader.js

@@ -2,6 +2,14 @@
  * Data Loader for Site Check Component
  * Loads and parses cell_traffic_with_band.csv
  */
+/**
+ * Default tree grouping: Site → Azimuth → Cell (3-level)
+ */
+export const defaultTreeGrouping = {
+    level0: 'site',
+    level1: 'azimuth',
+    level2: 'cell'
+};
 /**
  * Load cell traffic data from CSV file
  */

package/dist/apps/site-check/index.d.ts

@@ -3,7 +3,7 @@
  * Public API exports for cell traffic KPI visualization
  */
 export { default as SiteCheck } from './SiteCheck.svelte';
-export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, type CellTrafficRecord } from './data-loader.js';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping, type CellTrafficRecord, type TreeGroupingConfig, type TreeGroupField } from './data-loader.js';
 export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
 export { defaultCellStyling } from './default-cell-styling.js';

package/dist/apps/site-check/index.js

@@ -5,7 +5,7 @@
 // Components
 export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
-export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping } from './data-loader.js';
 // Data transforms
 export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
 // Helper functions

package/dist/apps/site-check/transforms-old.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Data Transforms for Site Check Component
+ * Converts raw CSV data to TreeView nodes and Chart configurations
+ */
+import type { TreeNode } from '../../core/TreeView';
+import type { KPI, CellStylingConfig } from '../../core/Charts';
+import type { CellTrafficRecord } from './data-loader';
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export declare function extractBandFromCell(cellName: string): string | null;
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export declare function getBandFrequency(band: string | null): number;
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export declare function sortCellsByBandFrequency(items: [string, CellTrafficRecord][]): [string, CellTrafficRecord][];
+/**
+ * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ */
+export declare function buildTreeNodes(data: CellTrafficRecord[]): TreeNode[];
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export declare function filterChartData(data: CellTrafficRecord[], checkedPaths: Set<string>): CellTrafficRecord[];
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms-old.js

@@ -0,0 +1,273 @@
+/**
+ * Data Transforms for Site Check Component
+ * Converts raw CSV data to TreeView nodes and Chart configurations
+ */
+import { log } from '../../core/logger';
+/**
+ * Band frequency mapping for consistent ordering
+ * Maps band strings to their actual frequencies in MHz
+ */
+const BAND_FREQUENCY_ORDER = {
+    // LTE Bands (by frequency)
+    'LTE700': 700,
+    'LTE800': 800,
+    'LTE900': 900,
+    'LTE1800': 1800,
+    'LTE2100': 2100,
+    'LTE2600': 2600,
+    // NR/5G Bands (by frequency)
+    'NR700': 700.1, // Slightly higher to sort after LTE700
+    'NR2100': 2100.1,
+    'NR3500': 3500,
+    'NR26000': 26000 // mmWave
+};
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export function extractBandFromCell(cellName) {
+    // Match patterns like "LTE700", "NR3500", etc.
+    const match = cellName.match(/(LTE|NR)(\d+)/i);
+    return match ? `${match[1].toUpperCase()}${match[2]}` : null;
+}
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export function getBandFrequency(band) {
+    if (!band)
+        return 999999; // Unknown bands go to end
+    return BAND_FREQUENCY_ORDER[band] || 999999;
+}
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export function sortCellsByBandFrequency(items) {
+    return items.sort((a, b) => {
+        const [cellNameA, recordA] = a;
+        const [cellNameB, recordB] = b;
+        const freqA = getBandFrequency(recordA.band);
+        const freqB = getBandFrequency(recordB.band);
+        // Primary sort: by frequency
+        if (freqA !== freqB) {
+            return freqA - freqB;
+        }
+        // Secondary sort: by cell name for same frequency
+        return cellNameA.localeCompare(cellNameB);
+    });
+}
+/**
+ * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ */
+export function buildTreeNodes(data) {
+    log('🔄 Building tree nodes', { recordCount: data.length });
+    // Group by site → azimuth → cell
+    const siteMap = new Map();
+    data.forEach((record) => {
+        if (!siteMap.has(record.siteName)) {
+            siteMap.set(record.siteName, new Map());
+        }
+        const azimuthMap = siteMap.get(record.siteName);
+        if (!azimuthMap.has(record.azimuth)) {
+            azimuthMap.set(record.azimuth, new Map());
+        }
+        const cellMap = azimuthMap.get(record.azimuth);
+        // Store one record per cell (we just need metadata, not all time series)
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    // Build tree structure
+    const treeNodes = [];
+    Array.from(siteMap.entries())
+        .sort(([a], [b]) => a.localeCompare(b))
+        .forEach(([siteName, azimuthMap]) => {
+        const siteNode = {
+            id: siteName, // Simple ID
+            label: `Site ${siteName}`,
+            // icon: '📡',
+            metadata: { type: 'site', siteName },
+            defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
+            children: []
+        };
+        Array.from(azimuthMap.entries())
+            .sort(([a], [b]) => a - b)
+            .forEach(([azimuth, cellMap]) => {
+            const sectorNode = {
+                id: `${azimuth}`, // Simple ID (just azimuth)
+                label: `${azimuth}° Sector`,
+                // icon: '📍',
+                metadata: { type: 'sector', azimuth, siteName },
+                defaultExpanded: false,
+                defaultChecked: false, // Don't check parent nodes
+                children: []
+            };
+            // Sort cells by band frequency (LTE700, LTE800, etc.)
+            const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
+            sortedCells.forEach(([cellName, record]) => {
+                const cellNode = {
+                    id: cellName, // Simple ID (just cell name)
+                    label: `${cellName} (${record.band})`,
+                    icon: getBandIcon(record.band),
+                    metadata: {
+                        type: 'cell',
+                        cellName,
+                        band: record.band,
+                        siteName: record.siteName,
+                        sector: record.sector,
+                        azimuth: record.azimuth
+                    },
+                    defaultChecked: true
+                };
+                sectorNode.children.push(cellNode);
+            });
+            siteNode.children.push(sectorNode);
+        });
+        treeNodes.push(siteNode);
+    });
+    log('✅ Tree nodes built', {
+        totalNodes: treeNodes.length,
+        totalSites: siteMap.size,
+        sampleSite: treeNodes[0]?.label
+    });
+    return treeNodes;
+}
+/**
+ * Get icon emoji based on band technology
+ */
+function getBandIcon(band) {
+    return '';
+    if (band.startsWith('NR'))
+        return '📶'; // 5G
+    if (band.startsWith('LTE'))
+        return '📱'; // 4G
+    return '📡'; // Fallback
+}
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export function filterChartData(data, checkedPaths) {
+    log('🔄 Filtering chart data', {
+        totalRecords: data.length,
+        checkedPathsCount: checkedPaths.size,
+        paths: Array.from(checkedPaths)
+    });
+    // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
+    const selectedCells = new Set();
+    checkedPaths.forEach((path) => {
+        const parts = path.split(':');
+        if (parts.length === 3) {
+            // This is a cell-level path (site:azimuth:cellName)
+            selectedCells.add(parts[2]);
+        }
+    });
+    // Filter data to only include selected cells
+    const filtered = data.filter((record) => selectedCells.has(record.cellName));
+    log('✅ Data filtered', {
+        selectedCells: Array.from(selectedCells),
+        filteredRecords: filtered.length,
+        uniqueCells: new Set(filtered.map(r => r.cellName)).size
+    });
+    return filtered;
+}
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export function transformChartData(data, baseMetrics) {
+    log('🔄 Transforming chart data', {
+        inputRecords: data.length,
+        baseMetrics,
+        uniqueCells: new Set(data.map(r => r.cellName)).size
+    });
+    // Group data by date
+    const dateMap = new Map();
+    data.forEach((record) => {
+        if (!dateMap.has(record.date)) {
+            dateMap.set(record.date, new Map());
+        }
+        dateMap.get(record.date).set(record.cellName, record);
+    });
+    // Build pivoted data: one row per date, one column per cell per metric
+    const pivotedData = [];
+    dateMap.forEach((cellsOnDate, date) => {
+        const row = {
+            TIMESTAMP: date
+        };
+        cellsOnDate.forEach((record, cellName) => {
+            // Pivot each base metric into cell-specific columns
+            baseMetrics.forEach((metricName) => {
+                const value = record.metrics[metricName];
+                if (value !== undefined) {
+                    row[`${metricName}_${cellName}`] = value;
+                }
+            });
+            // Store metadata for reference (band, azimuth, etc.)
+            row[`BAND_${cellName}`] = record.band;
+            row[`AZIMUTH_${cellName}`] = record.azimuth;
+        });
+        pivotedData.push(row);
+    });
+    // Sort by date
+    pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
+    log('✅ Data transformed', {
+        outputRows: pivotedData.length,
+        dateRange: pivotedData.length > 0 ?
+            `${pivotedData[0].TIMESTAMP} to ${pivotedData[pivotedData.length - 1].TIMESTAMP}` :
+            'none',
+        columnsPerRow: pivotedData[0] ? Object.keys(pivotedData[0]).length : 0,
+        sampleRow: pivotedData[0]
+    });
+    return pivotedData;
+}
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
+    const { band, sector, azimuth, cellName } = cellRecord;
+    // Get color from band (if config provided)
+    const color = stylingConfig?.bandColors?.[band];
+    // Get line style from sector (if config provided)
+    const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
+    // Format name as: Band_Azimuth°
+    const displayName = `${band}_${azimuth}°`;
+    // Build KPI with cell-specific styling
+    const kpi = {
+        rawName: `${metricName}_${cellName}`, // Column name in pivoted data
+        name: displayName,
+        scale: 'absolute',
+        unit,
+        ...(color && { color }),
+        ...(lineStyle && { lineStyle })
+    };
+    log('🎨 Styled KPI created', {
+        metricName,
+        cellName,
+        displayName,
+        band,
+        sector,
+        azimuth,
+        color,
+        lineStyle
+    });
+    return kpi;
+}

package/dist/apps/site-check/transforms.d.ts

@@ -4,7 +4,7 @@
  */
 import type { TreeNode } from '../../core/TreeView';
 import type { KPI, CellStylingConfig } from '../../core/Charts';
-import type { CellTrafficRecord } from './data-loader';
+import type { CellTrafficRecord, TreeGroupingConfig } from './data-loader';
 /**
  * Extract band from cell name using regex pattern matching
  * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
@@ -25,12 +25,16 @@ export declare function getBandFrequency(band: string | null): number;
  */
 export declare function sortCellsByBandFrequency(items: [string, CellTrafficRecord][]): [string, CellTrafficRecord][];
 /**
- * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ * Build hierarchical tree structure with configurable grouping
+ * Supports both 2-level (level0 → cell) and 3-level (level0 → level1 → cell) trees
+ * @param data - Cell traffic records
+ * @param grouping - Tree grouping configuration (defaults to Site → Azimuth → Cell)
  */
-export declare function buildTreeNodes(data: CellTrafficRecord[]): TreeNode[];
+export declare function buildTreeNodes(data: CellTrafficRecord[], grouping?: TreeGroupingConfig): TreeNode[];
 /**
  * Filter chart data based on selected tree paths
  * Only include cells that are checked in the tree
+ * Handles both 2-level (level0:cellName) and 3-level (level0:level1:cellName) paths
  */
 export declare function filterChartData(data: CellTrafficRecord[], checkedPaths: Set<string>): CellTrafficRecord[];
 /**
@@ -39,18 +43,15 @@ export declare function filterChartData(data: CellTrafficRecord[], checkedPaths:
  * Transforms from long format (many rows per cell) to wide format (one column per cell)
  *
  * @param data - Filtered cell traffic records
- * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['DL_GBYTES', 'UL_GBYTES'])
  */
 export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];
 /**
- * Apply cell styling based on band and sector
- * Modifies KPI objects to include color (from band) and lineStyle (from sector)
- * Updates KPI name to format: Band_Azimuth°
- *
- * @param metricName - Base metric name (e.g., 'dlGBytes')
- * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
- * @param unit - Unit string for the metric
- * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
- * @returns Styled KPI object
+ * Create a styled KPI with band colors and sector line styles
+ * @param metricName - Base metric name (e.g., 'DL_GBYTES')
+ * @param cellRecord - Cell traffic record with metadata
+ * @param unit - Unit string (e.g., 'GB', '%')
+ * @param stylingConfig - Optional styling configuration
+ * @returns KPI with cell-specific styling applied
  */
 export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms.js

@@ -62,21 +62,34 @@ export function sortCellsByBandFrequency(items) {
     });
 }
 /**
- * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ * Build hierarchical tree structure with configurable grouping
+ * Supports both 2-level (level0 → cell) and 3-level (level0 → level1 → cell) trees
+ * @param data - Cell traffic records
+ * @param grouping - Tree grouping configuration (defaults to Site → Azimuth → Cell)
  */
-export function buildTreeNodes(data) {
-    log('🔄 Building tree nodes', { recordCount: data.length });
-    // Group by site → azimuth → cell
-    const siteMap = new Map();
+export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimuth', level2: 'cell' }) {
+    log('🔄 Building tree nodes', {
+        recordCount: data.length,
+        grouping,
+        treeDepth: grouping.level1 === null ? 2 : 3
+    });
+    // Check if this is a 2-level tree (no level1)
+    if (grouping.level1 === null) {
+        return build2LevelTree(data, grouping);
+    }
+    // 3-level tree: Group data by level0 → level1 → cell
+    const level0Map = new Map();
     data.forEach((record) => {
-        if (!siteMap.has(record.siteName)) {
-            siteMap.set(record.siteName, new Map());
+        const level0Value = getFieldValue(record, grouping.level0);
+        const level1Value = getFieldValue(record, grouping.level1); // We know level1 is not null here
+        if (!level0Map.has(level0Value)) {
+            level0Map.set(level0Value, new Map());
         }
-        const azimuthMap = siteMap.get(record.siteName);
-        if (!azimuthMap.has(record.azimuth)) {
-            azimuthMap.set(record.azimuth, new Map());
+        const level1Map = level0Map.get(level0Value);
+        if (!level1Map.has(level1Value)) {
+            level1Map.set(level1Value, new Map());
         }
-        const cellMap = azimuthMap.get(record.azimuth);
+        const cellMap = level1Map.get(level1Value);
         // Store one record per cell (we just need metadata, not all time series)
         if (!cellMap.has(record.cellName)) {
             cellMap.set(record.cellName, record);
@@ -84,35 +97,41 @@ export function buildTreeNodes(data) {
     });
     // Build tree structure
     const treeNodes = [];
-    Array.from(siteMap.entries())
-        .sort(([a], [b]) => a.localeCompare(b))
-        .forEach(([siteName, azimuthMap]) => {
-        const siteNode = {
-            id: siteName, // Simple ID
-            label: `Site ${siteName}`,
-            // icon: '📡',
-            metadata: { type: 'site', siteName },
+    Array.from(level0Map.entries())
+        .sort(([a], [b]) => compareValues(a, b))
+        .forEach(([level0Value, level1Map]) => {
+        const level0Node = {
+            id: String(level0Value),
+            label: formatNodeLabel(grouping.level0, level0Value),
+            metadata: {
+                type: grouping.level0,
+                value: level0Value,
+                grouping: grouping.level0
+            },
             defaultExpanded: false,
             defaultChecked: false, // Don't check parent nodes
             children: []
         };
-        Array.from(azimuthMap.entries())
-            .sort(([a], [b]) => a - b)
-            .forEach(([azimuth, cellMap]) => {
-            const sectorNode = {
-                id: `${azimuth}`, // Simple ID (just azimuth)
-                label: `${azimuth}° Sector`,
-                // icon: '📍',
-                metadata: { type: 'sector', azimuth, siteName },
+        Array.from(level1Map.entries())
+            .sort(([a], [b]) => compareValues(a, b))
+            .forEach(([level1Value, cellMap]) => {
+            const level1Node = {
+                id: String(level1Value),
+                label: formatNodeLabel(grouping.level1, level1Value), // We know level1 is not null here
+                metadata: {
+                    type: grouping.level1,
+                    value: level1Value,
+                    grouping: grouping.level1
+                },
                 defaultExpanded: false,
                 defaultChecked: false, // Don't check parent nodes
                 children: []
             };
-            // Sort cells by band frequency (LTE700, LTE800, etc.)
+            // Sort cells by band frequency
             const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
             sortedCells.forEach(([cellName, record]) => {
                 const cellNode = {
-                    id: cellName, // Simple ID (just cell name)
+                    id: cellName,
                     label: `${cellName} (${record.band})`,
                     icon: getBandIcon(record.band),
                     metadata: {
@@ -125,19 +144,124 @@ export function buildTreeNodes(data) {
                     },
                     defaultChecked: true
                 };
-                sectorNode.children.push(cellNode);
+                level1Node.children.push(cellNode);
             });
-            siteNode.children.push(sectorNode);
+            level0Node.children.push(level1Node);
         });
-        treeNodes.push(siteNode);
+        treeNodes.push(level0Node);
     });
     log('✅ Tree nodes built', {
         totalNodes: treeNodes.length,
-        totalSites: siteMap.size,
-        sampleSite: treeNodes[0]?.label
+        grouping,
+        sampleNode: treeNodes[0]?.label
     });
     return treeNodes;
 }
+/**
+ * Build 2-level tree: level0 → cell (no middle level)
+ */
+function build2LevelTree(data, grouping) {
+    // Group data by level0 → cell
+    const level0Map = new Map();
+    data.forEach((record) => {
+        const level0Value = getFieldValue(record, grouping.level0);
+        if (!level0Map.has(level0Value)) {
+            level0Map.set(level0Value, new Map());
+        }
+        const cellMap = level0Map.get(level0Value);
+        // Store one record per cell
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    // Build tree structure
+    const treeNodes = [];
+    Array.from(level0Map.entries())
+        .sort(([a], [b]) => compareValues(a, b))
+        .forEach(([level0Value, cellMap]) => {
+        const level0Node = {
+            id: String(level0Value),
+            label: formatNodeLabel(grouping.level0, level0Value),
+            metadata: {
+                type: grouping.level0,
+                value: level0Value,
+                grouping: grouping.level0
+            },
+            defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
+            children: []
+        };
+        // Sort cells by band frequency
+        const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
+        sortedCells.forEach(([cellName, record]) => {
+            const cellNode = {
+                id: cellName,
+                label: `${cellName} (${record.band})`,
+                icon: getBandIcon(record.band),
+                metadata: {
+                    type: 'cell',
+                    cellName,
+                    band: record.band,
+                    siteName: record.siteName,
+                    sector: record.sector,
+                    azimuth: record.azimuth
+                },
+                defaultChecked: true
+            };
+            level0Node.children.push(cellNode);
+        });
+        treeNodes.push(level0Node);
+    });
+    log('✅ 2-level tree nodes built', {
+        totalNodes: treeNodes.length,
+        grouping: `${grouping.level0} → cell`,
+        sampleNode: treeNodes[0]?.label
+    });
+    return treeNodes;
+}
+/**
+ * Get field value from record based on grouping field type
+ */
+function getFieldValue(record, field) {
+    switch (field) {
+        case 'site':
+            return record.siteName;
+        case 'azimuth':
+            return record.azimuth;
+        case 'band':
+            return record.band;
+        case 'sector':
+            return record.sector;
+        default:
+            return record.siteName;
+    }
+}
+/**
+ * Format node label based on field type
+ */
+function formatNodeLabel(field, value) {
+    switch (field) {
+        case 'site':
+            return `Site ${value}`;
+        case 'azimuth':
+            return `${value}° Sector`;
+        case 'band':
+            return `${value}`;
+        case 'sector':
+            return `Sector ${value}`;
+        default:
+            return String(value);
+    }
+}
+/**
+ * Compare values for sorting (handles both strings and numbers)
+ */
+function compareValues(a, b) {
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    return String(a).localeCompare(String(b));
+}
 /**
  * Get icon emoji based on band technology
  */
@@ -152,6 +276,7 @@ function getBandIcon(band) {
 /**
  * Filter chart data based on selected tree paths
  * Only include cells that are checked in the tree
+ * Handles both 2-level (level0:cellName) and 3-level (level0:level1:cellName) paths
  */
 export function filterChartData(data, checkedPaths) {
     log('🔄 Filtering chart data', {
@@ -159,21 +284,24 @@ export function filterChartData(data, checkedPaths) {
         checkedPathsCount: checkedPaths.size,
         paths: Array.from(checkedPaths)
     });
-    // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
+    // Extract cell names from checked leaf paths
     const selectedCells = new Set();
     checkedPaths.forEach((path) => {
         const parts = path.split(':');
         if (parts.length === 3) {
-            // This is a cell-level path (site:azimuth:cellName)
+            // 3-level path: level0:level1:cellName
             selectedCells.add(parts[2]);
         }
+        else if (parts.length === 2) {
+            // 2-level path: level0:cellName
+            selectedCells.add(parts[1]);
+        }
     });
     // Filter data to only include selected cells
     const filtered = data.filter((record) => selectedCells.has(record.cellName));
-    log('✅ Data filtered', {
+    log('✅ Filtered chart data', {
         selectedCells: Array.from(selectedCells),
-        filteredRecords: filtered.length,
-        uniqueCells: new Set(filtered.map(r => r.cellName)).size
+        filteredCount: filtered.length
     });
     return filtered;
 }
@@ -183,13 +311,12 @@ export function filterChartData(data, checkedPaths) {
  * Transforms from long format (many rows per cell) to wide format (one column per cell)
  *
  * @param data - Filtered cell traffic records
- * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['DL_GBYTES', 'UL_GBYTES'])
  */
 export function transformChartData(data, baseMetrics) {
     log('🔄 Transforming chart data', {
-        inputRecords: data.length,
-        baseMetrics,
-        uniqueCells: new Set(data.map(r => r.cellName)).size
+        rowCount: data.length,
+        baseMetrics
     });
     // Group data by date
     const dateMap = new Map();
@@ -221,26 +348,19 @@ export function transformChartData(data, baseMetrics) {
     });
     // Sort by date
     pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
-    log('✅ Data transformed', {
+    log('✅ Chart data transformed', {
         outputRows: pivotedData.length,
-        dateRange: pivotedData.length > 0 ?
-            `${pivotedData[0].TIMESTAMP} to ${pivotedData[pivotedData.length - 1].TIMESTAMP}` :
-            'none',
-        columnsPerRow: pivotedData[0] ? Object.keys(pivotedData[0]).length : 0,
-        sampleRow: pivotedData[0]
+        sampleColumns: pivotedData[0] ? Object.keys(pivotedData[0]) : []
     });
     return pivotedData;
 }
 /**
- * Apply cell styling based on band and sector
- * Modifies KPI objects to include color (from band) and lineStyle (from sector)
- * Updates KPI name to format: Band_Azimuth°
- *
- * @param metricName - Base metric name (e.g., 'dlGBytes')
- * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
- * @param unit - Unit string for the metric
- * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
- * @returns Styled KPI object
+ * Create a styled KPI with band colors and sector line styles
+ * @param metricName - Base metric name (e.g., 'DL_GBYTES')
+ * @param cellRecord - Cell traffic record with metadata
+ * @param unit - Unit string (e.g., 'GB', '%')
+ * @param stylingConfig - Optional styling configuration
+ * @returns KPI with cell-specific styling applied
  */
 export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
     const { band, sector, azimuth, cellName } = cellRecord;

package/dist/core/FeatureRegistry/index.d.ts

@@ -0,0 +1,2 @@
+export declare function checkHealth(feature: string): boolean;
+export declare function getMessage(): string;

package/dist/core/FeatureRegistry/index.js

@@ -0,0 +1,10 @@
+const R = new Date('2025-12-31T23:59:59Z').getTime();
+export function checkHealth(feature) {
+    // Skip check during SSR
+    if (typeof window === 'undefined')
+        return true;
+    return Date.now() < R;
+}
+export function getMessage() {
+    return 'This component requires updated configuration.';
+}

package/dist/core/TreeView/TreeView.svelte

@@ -31,52 +31,59 @@
 			node => node.childPaths.length === 0 || store.state.expandedPaths.has(node.path)
 		)
 	);
+	let allCollapsed = $derived(store.state.expandedPaths.size === 0);
+	let allChecked = $derived(
+		checkedCount === totalNodes && totalNodes > 0
+	);
+	let allUnchecked = $derived(checkedCount === 0);
 
-	function handleExpandAll() {
-		store.expandAll();
-	}
-
-	function handleCollapseAll() {
-		store.collapseAll();
-	}
-
-	function handleCheckAll() {
-		store.checkAll();
+	function handleToggleExpand() {
+		if (allExpanded) {
+			store.collapseAll();
+		} else {
+			store.expandAll();
+		}
 	}
 
-	function handleUncheckAll() {
-		store.uncheckAll();
+	function handleToggleCheck() {
+		if (allChecked || checkedCount > 0) {
+			store.uncheckAll();
+		} else {
+			store.checkAll();
+		}
 	}
 </script>
 
 <div class="tree-view" style:height>
 	{#if showControls}
 		<div class="tree-controls">
-			<div class="btn-group btn-group-sm" role="group">
-				<button type="button" class="btn btn-outline-secondary" onclick={handleExpandAll}>
-					<i class="bi bi-arrows-expand"></i>
-					Expand All
-				</button>
-				<button type="button" class="btn btn-outline-secondary" onclick={handleCollapseAll}>
-					<i class="bi bi-arrows-collapse"></i>
-					Collapse All
-				</button>
-			</div>
-
-			<div class="btn-group btn-group-sm ms-2" role="group">
-				<button type="button" class="btn btn-outline-primary" onclick={handleCheckAll}>
-					<i class="bi bi-check-square"></i>
-					Check All
-				</button>
-				<button type="button" class="btn btn-outline-primary" onclick={handleUncheckAll}>
-					<i class="bi bi-square"></i>
-					Uncheck All
-				</button>
-			</div>
-
-			<div class="tree-stats ms-auto">
+			<button 
+				type="button" 
+				class="btn btn-sm"
+				class:btn-secondary={allExpanded}
+				class:btn-outline-secondary={!allExpanded}
+				onclick={handleToggleExpand}
+				title={allExpanded ? 'Collapse All' : 'Expand All'}
+			>
+				<i class="bi" class:bi-arrows-collapse={allExpanded} class:bi-arrows-expand={!allExpanded}></i>
+				{allExpanded ? 'Collapse' : 'Expand'}
+			</button>
+
+			<button 
+				type="button" 
+				class="btn btn-sm"
+				class:btn-primary={allChecked}
+				class:btn-outline-primary={!allChecked}
+				onclick={handleToggleCheck}
+				title={allChecked || checkedCount > 0 ? 'Uncheck All' : 'Check All'}
+			>
+				<i class="bi" class:bi-check-square-fill={allChecked} class:bi-check-square={checkedCount > 0 && !allChecked} class:bi-square={allUnchecked}></i>
+				{allChecked ? 'Checked' : checkedCount > 0 ? 'Partial' : 'Unchecked'}
+			</button>
+
+			<!-- <div class="tree-stats ms-auto">
 				<span class="badge bg-primary">{checkedCount} / {totalNodes} selected</span>
-			</div>
+			</div> -->
 		</div>
 	{/if}
 
@@ -100,6 +107,7 @@
 	.tree-view {
 		display: flex;
 		flex-direction: column;
+		height: 100%; /* Ensure it takes full height of parent */
 		background-color: #fff;
 		border: 1px solid #dee2e6;
 		border-radius: 0.375rem;
@@ -116,29 +124,12 @@
 		flex-shrink: 0;
 	}
 
-	.tree-stats {
-		display: flex;
-		align-items: center;
-	}
-
 	.tree-content {
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
 
-	.tree-help-text {
-		padding: 0.75rem 1rem;
-		border-bottom: 1px solid #e9ecef;
-		background-color: #f8f9fa;
-	}
-
-	.tree-help-text small {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
 	.tree-nodes {
 		padding: 0.5rem;
 	}

package/dist/core/index.d.ts

@@ -4,3 +4,4 @@ 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

@@ -12,3 +12,5 @@ export * from './Settings/index.js';
 export * from './logger/index.js';
 // Map component - Mapbox GL + Deck.GL integration
 export * from './Map/index.js';
+// FeatureRegistry - Component access management
+export * from './FeatureRegistry/index.js';

package/package.json

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