@smartnet360/svelte-components 0.0.83 → 0.0.84

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

@@ -3,7 +3,7 @@
 <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, type TreeGroupingConfig, defaultTreeGrouping } from './index';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling, type TreeGroupingConfig, type TreeGroupField, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
@@ -58,19 +58,56 @@
 	// 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 },
+	// Available field options for grouping levels
+	const fieldOptions: { value: TreeGroupField; label: string }[] = [
+		{ value: 'site', label: 'Site' },
+		{ value: 'band', label: 'Band' },
+		{ value: 'azimuth', label: 'Azimuth' },
+		{ value: 'cell', label: 'Cell' }
 	];
 
-	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
+	// Handlers for level changes
+	function handleLevel0Change(value: TreeGroupField) {
+		// Clear level1 if it conflicts with new level0
+		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
+		// Clear level2 if it conflicts with new level0
+		let newLevel2 = treeGrouping.level2;
+		if (newLevel2 !== null && newLevel2 !== 'cell' && newLevel2 === value) {
+			newLevel2 = null;
+		}
+		treeGrouping = {
+			level0: value,
+			level1: newLevel1,
+			level2: newLevel2
+		};
+	}
+
+	function handleLevel1Change(value: TreeGroupField | 'none') {
+		const newLevel1 = value === 'none' ? null : value;
+		// Clear level2 if it conflicts with new level1
+		let newLevel2 = treeGrouping.level2;
+		if (newLevel2 !== null && newLevel2 !== 'cell' && newLevel2 === newLevel1) {
+			newLevel2 = null;
+		}
+		treeGrouping = {
+			level0: treeGrouping.level0,
+			level1: newLevel1,
+			level2: newLevel2
+		};
+	}
+
+	// Get available options for level1 (exclude level0)
+	let availableLevel1Options = $derived.by(() => {
+		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
+	});
+
+	// Get available options for level2 (exclude level0 and level1)
+	let availableLevel2Options = $derived.by(() => {
+		return fieldOptions.filter(opt => 
+			opt.value !== treeGrouping.level0 && 
+			opt.value !== treeGrouping.level1
+		);
+	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	// Rebuild tree whenever treeGrouping changes
 	$effect(() => {
@@ -280,34 +317,71 @@
 								<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}
+			</div>
+		{/if}
 
-			<!-- Tree View -->
+		<!-- Grouping Selector -->
+		{#if showGroupingSelector}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<div class="small fw-semibold mb-2">Tree Grouping</div>
+				
+				<!-- Level 0 (Mandatory) -->
+				<div class="mb-2">
+					<label for="level0Select" class="form-label small mb-1">Level 0 (Root)</label>
+					<select 
+						id="level0Select"
+						class="form-select form-select-sm"
+						value={treeGrouping.level0}
+						onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
+					>
+						{#each fieldOptions as option}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				</div>
+				
+				<!-- Level 1 (Optional) -->
+				<div class="mb-2">
+					<label for="level1Select" class="form-label small mb-1">Level 1 (Optional)</label>
+					<select 
+						id="level1Select"
+						class="form-select form-select-sm"
+						value={treeGrouping.level1 ?? 'none'}
+						onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
+					>
+						<option value="none">None</option>
+						{#each availableLevel1Options as option}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				</div>
+				
+				<!-- Level 2 (Optional) -->
+				<div class="mb-0">
+					<label for="level2Select" class="form-label small mb-1">Level 2 (Optional)</label>
+					<select 
+						id="level2Select"
+						class="form-select form-select-sm"
+						value={treeGrouping.level2 ?? 'none'}
+						onchange={(e) => {
+							const value = e.currentTarget.value;
+							treeGrouping = {
+								level0: treeGrouping.level0,
+								level1: treeGrouping.level1,
+								level2: value === 'none' ? null : (value as 'cell')
+							};
+						}}
+					>
+						<option value="none">None</option>
+						<option value="cell">Cell</option>
+						{#each availableLevel2Options as option}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+		{/if}
+	{/if}			<!-- Tree View -->
 			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
 				{#if treeStore}
 					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />

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

@@ -14,17 +14,18 @@ export interface CellTrafficRecord {
 /**
  * Tree grouping field types
  */
-export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'cell';
 /**
  * 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)
+ * - For 3-level tree: level0 → level1 → level2
+ * - For 2-level tree: level0 → level1 (set level2 to null)
+ * - For 1-level tree: level0 only (set level1 and level2 to null)
  */
 export interface TreeGroupingConfig {
     level0: TreeGroupField;
     level1: TreeGroupField | null;
-    level2: 'cell';
+    level2: TreeGroupField | 'cell' | null;
 }
 /**
  * Default tree grouping: Site → Azimuth → Cell (3-level)

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

@@ -483,14 +483,18 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingC
 /**
  * Generate adaptive label based on tree grouping configuration
  * Label exactly matches the complete tree path shown in the tree view
+ * Only includes levels that are not null in the grouping config
  * @param record - Cell traffic record with all metadata
  * @param grouping - Current tree grouping configuration
- * @returns Formatted label string matching complete tree hierarchy (all levels)
+ * @returns Formatted label string matching complete tree hierarchy (only non-null levels)
  */
 function generateAdaptiveLabel(record, grouping) {
-    const { level0, level1 } = grouping;
+    const { level0, level1, level2 } = grouping;
     // Helper to format field values exactly as shown in tree
     const formatField = (field, value) => {
+        if (field === 'cell') {
+            return value; // Cell name as-is
+        }
         switch (field) {
             case 'azimuth':
                 return `${value}°`;
@@ -506,6 +510,9 @@ function generateAdaptiveLabel(record, grouping) {
     };
     // Get field values from record
     const getFieldValue = (field) => {
+        if (field === 'cell') {
+            return record.cellName;
+        }
         switch (field) {
             case 'site':
                 return record.siteName;
@@ -517,19 +524,18 @@ function generateAdaptiveLabel(record, grouping) {
                 return record.sector;
         }
     };
-    // Build label matching complete tree path (including cell)
-    const cellLabel = record.cellName;
-    if (level1 === null) {
-        // 2-level tree: level0 → cell
-        // Show: level0 → cellName (e.g., "SiteA → AB12141", "LTE2100 → AB12141")
-        const level0Value = formatField(level0, getFieldValue(level0));
-        return `${level0Value}_${cellLabel}`;
+    // Build label parts only for non-null levels
+    const parts = [];
+    // Level 0 is always present
+    parts.push(formatField(level0, getFieldValue(level0)));
+    // Level 1 (optional)
+    if (level1 !== null) {
+        parts.push(formatField(level1, getFieldValue(level1)));
     }
-    else {
-        // 3-level tree: level0 → level1 → cell
-        // Show: level0 → level1 → cellName (e.g., "SiteA → 120° → AB12141")
-        const level0Value = formatField(level0, getFieldValue(level0));
-        const level1Value = formatField(level1, getFieldValue(level1));
-        return `${level0Value}_${level1Value}_${cellLabel}`;
+    // Level 2 (optional)
+    if (level2 !== null) {
+        parts.push(formatField(level2, getFieldValue(level2)));
     }
+    // Join with arrow separator
+    return parts.join('_');
 }

package/package.json

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