@smartnet360/svelte-components 0.0.35 → 0.0.37

package/dist/apps/index.d.ts

@@ -1 +1,2 @@
 export * from './antenna-pattern/index.js';
+export * from './site-check/index.js';

package/dist/apps/index.js

@@ -4,3 +4,4 @@
 export * from './antenna-pattern/index.js';
 // Test app (if needed for demos)
 // export * from './test/index.js';
+export * from './site-check/index.js';

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

@@ -5,6 +5,7 @@
 	import { ChartComponent, type Layout } from '../../core/Charts';
 	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord } from './index';
 	import { expandLayoutForCells } from './helper';
+	import { log } from '../../core/logger';
 	import { onMount } from 'svelte';
     import type { Mode } from '../../index.js';
 
@@ -20,8 +21,18 @@
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	onMount(() => {
+		log('🚀 SiteCheck Initializing', {
+			totalRecords: rawData.length,
+			baseMetrics,
+			mode
+		});
+
 		// Build tree nodes from raw data
 		const treeNodes = buildTreeNodes(rawData);
+		log('🌲 Tree Nodes Built', {
+			nodeCount: treeNodes.length,
+			firstNode: treeNodes[0]
+		});
 
 		// Create tree store
 		treeStore = createTreeStore({
@@ -30,6 +41,7 @@
 			persistState: true,
 			defaultExpandAll: false
 		});
+		log('✅ Tree Store Created', { namespace: 'site-check' });
 	});
 
 	// Derive chart data from tree selection
@@ -37,22 +49,55 @@
 		if (!treeStore) return [];
 		const storeValue = $treeStore;
 		if (!storeValue) return [];
-		return filterChartData(rawData, storeValue.state.checkedPaths);
+		const filtered = filterChartData(rawData, storeValue.state.checkedPaths);
+		log('🔍 Filtered Data:', {
+			totalRaw: rawData.length,
+			checkedPaths: Array.from(storeValue.state.checkedPaths),
+			filteredCount: filtered.length,
+			cells: Array.from(new Set(filtered.map(r => r.cellName)))
+		});
+		return filtered;
 	});
 
 	// Transform data using base metrics from layout
-	let chartData = $derived(transformChartData(filteredData, baseMetrics));
+	let chartData = $derived.by(() => {
+		const transformed = transformChartData(filteredData, baseMetrics);
+		log('📊 Chart Data:', {
+			filteredRows: filteredData.length,
+			transformedRows: transformed.length,
+			baseMetrics,
+			sampleRow: transformed[0],
+			columns: transformed[0] ? Object.keys(transformed[0]) : []
+		});
+		return transformed;
+	});
 
 	// Expand layout based on selected cells
-	let chartLayout = $derived(expandLayoutForCells(baseLayout, filteredData));
-    console.log('chartLayout', chartLayout);
+	let chartLayout = $derived.by(() => {
+		const expanded = expandLayoutForCells(baseLayout, filteredData);
+		log('📐 Chart Layout:', {
+			grid: expanded.grid,
+			sectionsCount: expanded.sections.length,
+			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
+			firstSection: expanded.sections[0]
+		});
+		return expanded;
+	});
 
 	let totalRecords = $derived(rawData.length);
 	let visibleRecords = $derived(filteredData.length);
 
 	// Compute simple stats
-	let totalCells = $derived(new Set(filteredData.map((r) => r.cellName)).size);
-	let totalSites = $derived(new Set(filteredData.map((r) => r.siteName)).size);
+	let totalCells = $derived.by(() => {
+		const count = new Set(filteredData.map((r) => r.cellName)).size;
+		log('📱 Total Cells:', count);
+		return count;
+	});
+	let totalSites = $derived.by(() => {
+		const count = new Set(filteredData.map((r) => r.siteName)).size;
+		log('📡 Total Sites:', count);
+		return count;
+	});
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">

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

@@ -2,10 +2,12 @@
  * Data Transforms for Site Check Component
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
+import { log } from '../../core/logger';
 /**
  * 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) => {
@@ -33,6 +35,7 @@ export function buildTreeNodes(data) {
             // icon: '📡',
             metadata: { type: 'site', siteName },
             defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
             children: []
         };
         Array.from(azimuthMap.entries())
@@ -44,6 +47,7 @@ export function buildTreeNodes(data) {
                 // icon: '📍',
                 metadata: { type: 'sector', azimuth, siteName },
                 defaultExpanded: false,
+                defaultChecked: false, // Don't check parent nodes
                 children: []
             };
             Array.from(cellMap.entries())
@@ -69,6 +73,11 @@ export function buildTreeNodes(data) {
         });
         treeNodes.push(siteNode);
     });
+    log('✅ Tree nodes built', {
+        totalNodes: treeNodes.length,
+        totalSites: siteMap.size,
+        sampleSite: treeNodes[0]?.label
+    });
     return treeNodes;
 }
 /**
@@ -87,6 +96,11 @@ function getBandIcon(band) {
  * 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) => {
@@ -97,7 +111,13 @@ export function filterChartData(data, checkedPaths) {
         }
     });
     // Filter data to only include selected cells
-    return data.filter((record) => selectedCells.has(record.cellName));
+    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
@@ -108,6 +128,11 @@ export function filterChartData(data, checkedPaths) {
  * @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) => {
@@ -138,5 +163,13 @@ export function transformChartData(data, baseMetrics) {
     });
     // 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;
 }

package/dist/core/Charts/ChartCard.svelte

@@ -7,6 +7,7 @@
 	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
+	import { log } from '../logger';
 
 	const dispatch = createEventDispatcher<{
 		chartcontextmenu: {
@@ -235,9 +236,16 @@
 		// 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 });
 			Plotly.react(chartDiv, traces, finalLayout, config);
 		} else {
 			// Initial chart creation
+			log('📊 Creating new chart with Plotly.newPlot', {
+				chartTitle: chart.title,
+				traces: traces.length,
+				leftKPIs: chart.yLeft.length,
+				rightKPIs: chart.yRight.length
+			});
 			Plotly.newPlot(chartDiv, traces, finalLayout, config);
 			chartInitialized = true;
 		}
@@ -251,11 +259,23 @@
 	}
 
 	onMount(() => {
+		log('📈 ChartCard mounted', {
+			chartTitle: chart.title,
+			leftKPIs: chart.yLeft.length,
+			rightKPIs: chart.yRight.length
+		});
+
 		// Initial container size measurement
 		if (chartDiv) {
 			const rect = chartDiv.getBoundingClientRect();
 			containerSize.width = rect.width;
 			containerSize.height = rect.height;
+			
+			log('📐 Initial container size', {
+				chartTitle: chart.title,
+				width: rect.width,
+				height: rect.height
+			});
 		}
 
 		renderChart();

package/dist/core/Charts/ChartComponent.svelte

@@ -6,6 +6,7 @@
 	import ChartCard from './ChartCard.svelte';
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
+	import { log } from '../logger';
 
 	interface Props {
 		layout: Layout;
@@ -55,6 +56,18 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
 	
+	// Log component initialization
+	$effect(() => {
+		log('📊 ChartComponent initialized', {
+			mode,
+			dataRows: data.length,
+			sections: layout.sections.length,
+			totalCharts: layout.sections.reduce((sum, s) => sum + s.charts.length, 0),
+			enableAdaptation,
+			showGlobalControls
+		});
+	});
+	
 	// Preprocess raw data once - automatically memoized by Svelte's $derived
 	// This extracts all KPI values and timestamps, cached until data or layout changes
 	let processedData = $derived(getPreprocessedData(data, layout));
@@ -76,6 +89,12 @@
 	
 	// Handler for global controls updates
 	function handleControlsUpdate(updatedControls: GlobalChartControls) {
+		log('🎛️ Global controls updated', {
+			movingAverageEnabled: updatedControls.movingAverage?.enabled,
+			windowOverride: updatedControls.movingAverage?.windowOverride,
+			markersEnabled: updatedControls.markers?.enabled,
+			legendEnabled: updatedControls.legend?.enabled
+		});
 		globalControls = updatedControls;
 	}
 	
@@ -166,12 +185,17 @@
 
 	function zoomSelectedChart() {
 		if (contextMenu.chart && contextMenu.section) {
+			log('🔍 Zooming chart', {
+				chartTitle: contextMenu.chart.title,
+				sectionId: contextMenu.section.id
+			});
 			zoomedChart = { chart: contextMenu.chart, section: contextMenu.section };
 		}
 		closeContextMenu();
 	}
 
 	function exitZoom() {
+		log('🔍 Exiting zoom mode');
 		zoomedChart = null;
 		closeContextMenu();
 	}

package/dist/core/Charts/data-processor.js

@@ -1,3 +1,4 @@
+import { log } from '../logger';
 /**
  * Extract all unique KPI rawNames from a layout configuration
  * This determines which columns we need to extract from raw data
@@ -16,6 +17,10 @@ export function extractKPINames(layout) {
             }
         }
     }
+    log('📋 KPI names extracted', {
+        totalKPIs: kpiNames.size,
+        kpiNames: Array.from(kpiNames)
+    });
     return kpiNames;
 }
 /**
@@ -28,6 +33,11 @@ export function extractKPINames(layout) {
  * @returns Preprocessed data ready for chart rendering
  */
 export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP') {
+    log('🔄 Preprocessing chart data', {
+        rawDataRows: data.length,
+        sections: layout.sections.length,
+        timestampField
+    });
     // Extract all unique KPI names we need to process
     const kpiNames = extractKPINames(layout);
     // Initialize the result map
@@ -42,9 +52,18 @@ export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP')
         })
             .filter(val => !isNaN(val)); // Remove invalid values
         kpiValues.set(kpiName, values);
+        if (values.length === 0) {
+            log('⚠️ No valid values found for KPI', { kpiName });
+        }
     }
     // Extract timestamps once
     const timestamps = data.map(row => row[timestampField]);
+    log('✅ Data preprocessing complete', {
+        processedKPIs: kpiValues.size,
+        timestampCount: timestamps.length,
+        sampleKPI: kpiValues.keys().next().value,
+        sampleValues: kpiValues.values().next().value?.slice(0, 3)
+    });
     return {
         kpiValues,
         timestamps,
@@ -72,9 +91,11 @@ export function getPreprocessedData(data, layout, timestampField = 'TIMESTAMP')
     if (cached) {
         // Verify cache is still valid (data reference matches)
         if (cached._rawDataRef === data) {
+            log('💾 Using cached preprocessed data');
             return cached;
         }
     }
+    log('🔄 Cache miss - preprocessing data');
     // Cache miss or invalid - compute and cache
     const processed = preprocessChartData(data, layout, timestampField);
     preprocessCache.set(data, processed);

package/dist/core/TreeView/tree-utils.js

@@ -2,6 +2,7 @@
  * Tree utility functions
  * Helper functions for path manipulation, tree flattening, and state management
  */
+import { log } from '../logger';
 /**
  * Get parent path from a node path
  * @example getParentPath("site-a:sector-1:700", ":") => "site-a:sector-1"
@@ -144,10 +145,18 @@ export function saveStateToStorage(namespace, state) {
     if (!namespace)
         return;
     try {
-        localStorage.setItem(getStorageKey(namespace, 'checked'), JSON.stringify(Array.from(state.checkedPaths)));
-        localStorage.setItem(getStorageKey(namespace, 'expanded'), JSON.stringify(Array.from(state.expandedPaths)));
+        const checkedArray = Array.from(state.checkedPaths);
+        const expandedArray = Array.from(state.expandedPaths);
+        localStorage.setItem(getStorageKey(namespace, 'checked'), JSON.stringify(checkedArray));
+        localStorage.setItem(getStorageKey(namespace, 'expanded'), JSON.stringify(expandedArray));
+        log('💾 State saved to localStorage', {
+            namespace,
+            checkedCount: checkedArray.length,
+            expandedCount: expandedArray.length
+        });
     }
     catch (error) {
+        log('❌ Failed to save tree state', { namespace, error });
         console.warn('Failed to save tree state to localStorage:', error);
     }
 }
@@ -166,14 +175,23 @@ export function loadStateFromStorage(namespace, state) {
             updates.checkedPaths = new Set(checkedArray);
             // Recalculate indeterminate states
             updates.indeterminatePaths = calculateIndeterminateStates(state.nodes, updates.checkedPaths);
+            log('📂 Loaded checked paths from localStorage', {
+                namespace,
+                checkedCount: checkedArray.length
+            });
         }
         if (expandedJson) {
             const expandedArray = JSON.parse(expandedJson);
             updates.expandedPaths = new Set(expandedArray);
+            log('📂 Loaded expanded paths from localStorage', {
+                namespace,
+                expandedCount: expandedArray.length
+            });
         }
         return updates;
     }
     catch (error) {
+        log('❌ Failed to load tree state', { namespace, error });
         console.warn('Failed to load tree state from localStorage:', error);
         return {};
     }
@@ -187,8 +205,10 @@ export function clearStorageForNamespace(namespace) {
     try {
         localStorage.removeItem(getStorageKey(namespace, 'checked'));
         localStorage.removeItem(getStorageKey(namespace, 'expanded'));
+        log('🗑️ Cleared tree state from localStorage', { namespace });
     }
     catch (error) {
+        log('❌ Failed to clear tree state', { namespace, error });
         console.warn('Failed to clear tree state from localStorage:', error);
     }
 }

package/dist/core/TreeView/tree.store.js

@@ -4,19 +4,39 @@
  */
 import { writable } from 'svelte/store';
 import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
+import { log } from '../logger';
 /**
  * Create a tree store with state management and persistence
  */
 export function createTreeStore(config) {
+    log('🌲 Creating TreeStore', {
+        namespace: config.namespace,
+        nodeCount: config.nodes.length,
+        persistState: config.persistState,
+        defaultExpandAll: config.defaultExpandAll
+    });
     const separator = config.pathSeparator || ':';
     // Flatten tree structure
     const nodesMap = flattenTree(config.nodes, config);
+    log('📊 Tree flattened', {
+        totalNodes: nodesMap.size,
+        separator
+    });
     // Build initial state
     let state = buildInitialState(nodesMap, config);
+    log('🔧 Initial state built', {
+        checkedPaths: state.checkedPaths.size,
+        expandedPaths: state.expandedPaths.size
+    });
     // Load persisted state if enabled
     if (config.persistState && config.namespace) {
         const persistedState = loadStateFromStorage(config.namespace, state);
         state = { ...state, ...persistedState };
+        log('💾 Loaded persisted state', {
+            namespace: config.namespace,
+            checkedPaths: state.checkedPaths.size,
+            expandedPaths: state.expandedPaths.size
+        });
     }
     // Create writable store
     const store = writable({
@@ -52,10 +72,13 @@ export function createTreeStore(config) {
      * Toggle a node's checked state (with cascading)
      */
     function toggle(path) {
+        log('🔄 Toggling node', { path });
         updateState(state => {
             const nodeState = state.nodes.get(path);
-            if (!nodeState)
+            if (!nodeState) {
+                log('⚠️ Node not found', { path });
                 return state;
+            }
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
             // Update this node
@@ -67,6 +90,11 @@ export function createTreeStore(config) {
             }
             // Cascade to all descendants
             const descendants = getDescendantPaths(path, state.nodes, separator);
+            log('📦 Cascading to descendants', {
+                path,
+                descendantCount: descendants.length,
+                newChecked
+            });
             descendants.forEach(descendantPath => {
                 if (newChecked) {
                     newCheckedPaths.add(descendantPath);
@@ -99,6 +127,12 @@ export function createTreeStore(config) {
             }
             // Recalculate indeterminate states
             const newIndeterminatePaths = calculateIndeterminateStates(state.nodes, newCheckedPaths);
+            log('✅ Toggle complete', {
+                path,
+                newChecked,
+                totalChecked: newCheckedPaths.size,
+                indeterminate: newIndeterminatePaths.size
+            });
             return {
                 ...state,
                 checkedPaths: newCheckedPaths,
@@ -155,11 +189,13 @@ export function createTreeStore(config) {
      * Check all nodes
      */
     function checkAll() {
+        log('✅ Check all nodes');
         updateState(state => {
             const newCheckedPaths = new Set();
             state.nodes.forEach((_, path) => {
                 newCheckedPaths.add(path);
             });
+            log('✅ All nodes checked', { totalChecked: newCheckedPaths.size });
             return {
                 ...state,
                 checkedPaths: newCheckedPaths,
@@ -171,6 +207,7 @@ export function createTreeStore(config) {
      * Uncheck all nodes
      */
     function uncheckAll() {
+        log('❌ Uncheck all nodes');
         updateState(state => ({
             ...state,
             checkedPaths: new Set(),

package/dist/core/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Desktop/index.js';
 export * from './Charts/index.js';
 export * from './TreeView/index.js';
+export * from './logger/index.js';

package/dist/core/index.js

@@ -6,3 +6,5 @@ export * from './Desktop/index.js';
 export * from './Charts/index.js';
 // TreeView generic hierarchical component
 export * from './TreeView/index.js';
+// Logger utility for debugging and monitoring
+export * from './logger/index.js';

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

@@ -0,0 +1,26 @@
+/**
+ * Simple debug logger utility
+ *
+ * @example
+ * ```typescript
+ * import { log } from './';
+ *
+ * log('User clicked button', { userId: 123 });
+ * log('Data loaded', data);
+ *
+ * // Disable logging globally
+ * log.disable();
+ *
+ * // Enable logging globally
+ * log.enable();
+ * ```
+ */
+/**
+ * Simple log function - logs to console when enabled
+ */
+export declare function log(message: string, ...args: any[]): void;
+export declare namespace log {
+    var disable: () => void;
+    var enable: () => void;
+    var isEnabled: () => boolean;
+}

package/dist/core/logger/index.js

@@ -0,0 +1,42 @@
+/**
+ * Simple debug logger utility
+ *
+ * @example
+ * ```typescript
+ * import { log } from './';
+ *
+ * log('User clicked button', { userId: 123 });
+ * log('Data loaded', data);
+ *
+ * // Disable logging globally
+ * log.disable();
+ *
+ * // Enable logging globally
+ * log.enable();
+ * ```
+ */
+let enabled = true;
+/**
+ * Simple log function - logs to console when enabled
+ */
+export function log(message, ...args) {
+    if (enabled) {
+        console.log(`[DEBUG]`, message, ...args);
+    }
+}
+/**
+ * Disable logging globally
+ */
+log.disable = () => {
+    enabled = false;
+};
+/**
+ * Enable logging globally
+ */
+log.enable = () => {
+    enabled = true;
+};
+/**
+ * Check if logging is enabled
+ */
+log.isEnabled = () => enabled;

package/package.json

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