@smartnet360/svelte-components 0.0.103 → 0.0.104

package/dist/core/Charts/ChartCard.svelte

@@ -7,7 +7,6 @@
 	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';
 	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
@@ -244,22 +243,9 @@
 		// 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,
-				hoverMode: effectiveHoverMode,
-				layoutHoverMode: finalLayout.hovermode
-			});
 			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,
-				hoverMode: effectiveHoverMode,
-				layoutHoverMode: finalLayout.hovermode
-			});
 			Plotly.newPlot(chartDiv, traces, finalLayout, config);
 			chartInitialized = true;
 		}
@@ -273,14 +259,6 @@
 	}
 
 	onMount(() => {
-		log('📈 ChartCard mounted', {
-			chartTitle: chart.title,
-			leftKPIs: chart.yLeft.length,
-			rightKPIs: chart.yRight.length,
-			renderDelay,
-			lazyRender
-		});
-
 		// Initial container size measurement
 		if (chartDiv) {
 			const rect = chartDiv.getBoundingClientRect();
@@ -312,7 +290,6 @@
 				(entries) => {
 					const [entry] = entries;
 					if (entry.isIntersecting && !chartInitialized) {
-						log('👁️ Chart entering viewport', { chartTitle: chart.title });
 						isVisible = true;
 						doRender();
 						// Disconnect after first render - chart stays rendered

package/dist/core/Charts/ChartComponent.svelte

@@ -6,7 +6,6 @@
 	import ChartCard from './ChartCard.svelte';
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
-	import { log } from '../logger';
 	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
@@ -58,18 +57,6 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true, persistSettings = false }: Props = $props();
 	let isHealthy = $state(checkHealth('charts'));
-	// 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,
-			layoutHoverMode: layout.hoverMode
-		});
-	});
 	
 	// Preprocess raw data once - automatically memoized by Svelte's $derived
 	// This extracts all KPI values and timestamps, cached until data or layout changes
@@ -98,13 +85,6 @@
 	
 	// 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,
-			hoverMode: updatedControls.hoverMode?.mode
-		});
 		globalControls = updatedControls;
 	}
 	
@@ -195,17 +175,12 @@
 
 	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,4 +1,3 @@
-import { log } from '../logger';
 /**
  * Extract all unique KPI rawNames from a layout configuration
  * This determines which columns we need to extract from raw data
@@ -17,10 +16,6 @@ export function extractKPINames(layout) {
             }
         }
     }
-    log('📋 KPI names extracted', {
-        totalKPIs: kpiNames.size,
-        kpiNames: Array.from(kpiNames)
-    });
     return kpiNames;
 }
 /**
@@ -33,11 +28,6 @@ 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
@@ -53,17 +43,11 @@ 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 });
+            console.warn(`[Charts] 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,
@@ -91,11 +75,9 @@ 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/index.d.ts

@@ -3,4 +3,5 @@ export * from './Charts/index.js';
 export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
+export * from './CellTable/index.js';
 export * from './FeatureRegistry/index.js';

package/dist/core/index.js

@@ -10,6 +10,8 @@ export * from './TreeView/index.js';
 export * from './Settings/index.js';
 // Logger utility for debugging and monitoring
 export * from './logger/index.js';
+// CellTable - Tabulator-based cell data table with Bootstrap theming
+export * from './CellTable/index.js';
 // Map component - Mapbox GL + Deck.GL integration
 // TODO: Moved to top-level src/lib/map module
 // export * from './Map/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.103",
+	"version": "0.0.104",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -39,7 +39,8 @@
 		"dexie": "^4.0.11",
 		"mapbox-gl": "^3.0.0",
 		"plotly.js-dist-min": "^3.1.0",
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"tabulator-tables": "^6.3.1"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",

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

@@ -1,56 +0,0 @@
-/**
- * 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

@@ -1,273 +0,0 @@
-/**
- * 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;
-}