@smartnet360/svelte-components 0.0.113 → 0.0.115

package/dist/core/CellTable/CellTable.svelte

@@ -20,6 +20,13 @@
 		cellDataSorter
 	} from './column-config';
 
+	// Type for Tabulator group component (not exported from tabulator-tables)
+	interface TabulatorGroup {
+		getKey(): string | number | boolean;
+		getRows(): RowComponent[];
+		scrollTo(): Promise<void>;
+	}
+
 	interface Props extends CellTableProps {
 		/** Row selection change event */
 		onselectionchange?: (event: RowSelectionEvent) => void;
@@ -335,6 +342,34 @@
 			.map(col => col.getField())
 			.filter((field): field is string => !!field);
 	}
+
+	/** Get all group keys (when grouping is active) */
+	export function getGroups(): { key: string; count: number }[] {
+		if (!table || groupBy === 'none') return [];
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			return groups.map(g => ({
+				key: String(g.getKey()),
+				count: g.getRows().length
+			}));
+		} catch {
+			return [];
+		}
+	}
+
+	/** Scroll to a specific group by key */
+	export function scrollToGroup(key: string): void {
+		if (!table || groupBy === 'none') return;
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			const group = groups.find(g => String(g.getKey()) === key);
+			if (group) {
+				group.scrollTo();
+			}
+		} catch (e) {
+			console.warn('Failed to scroll to group:', e);
+		}
+	}
 </script>
 
 <div class="cell-table-container">

package/dist/core/CellTable/CellTable.svelte.d.ts

@@ -28,6 +28,11 @@ declare const CellTable: import("svelte").Component<Props, {
     showColumn: (field: string) => void;
     hideColumn: (field: string) => void;
     getVisibleColumns: () => string[];
+    getGroups: () => {
+        key: string;
+        count: number;
+    }[];
+    scrollToGroup: (key: string) => void;
 }, "">;
 type CellTable = ReturnType<typeof CellTable>;
 export default CellTable;

package/dist/core/CellTable/CellTableDemo.svelte

@@ -160,6 +160,7 @@
 			headerFilters={true}
 			showDetailsSidebar={true}
 			sidebarWidth={320}
+			showScrollSpy={true}
 			title="Cell Data"
 			onselectionchange={handleSelectionChange}
 		>

package/dist/core/CellTable/CellTablePanel.svelte

@@ -32,6 +32,8 @@
 		showToolbar?: boolean;
 		/** Show export buttons */
 		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
 		/** Technology color mapping */
 		techColors?: TechColorMap;
 		/** Status color mapping */
@@ -48,6 +50,8 @@
 		persistSettings?: boolean;
 		/** Storage key prefix for persisted settings */
 		storageKey?: string;
+		/** Show scrollspy navigation bar for quick group navigation */
+		showScrollSpy?: boolean;
 		/** Bindable reference to table methods */
 		tableRef?: { redraw: () => void } | null;
 		/** Row selection change event */
@@ -75,6 +79,7 @@
 		height = '100%',
 		showToolbar = true,
 		showExport = true,
+		showJsonExport = false,
 		techColors,
 		statusColors,
 		headerFilters = true,
@@ -83,6 +88,7 @@
 		sidebarWidth = 320,
 		persistSettings = true,
 		storageKey = 'cell-table',
+		showScrollSpy = false,
 		tableRef = $bindable(null),
 		onselectionchange,
 		onrowclick,
@@ -97,13 +103,15 @@
 	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
 	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
 	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
+	const STORAGE_KEY_SCROLLSPY = `${storageKey}-scrollSpyEnabled`;
 
 	// Load persisted settings
 	function loadPersistedSettings() {
-		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true };
+		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true, scrollSpyEnabled: showScrollSpy };
 		
 		let columns: string[] | null = null;
 		let filters = true;
+		let scrollSpy = showScrollSpy;
 		
 		try {
 			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
@@ -120,10 +128,15 @@
 			if (savedFilters !== null) {
 				filters = savedFilters === 'true';
 			}
+			
+			const savedScrollSpy = localStorage.getItem(STORAGE_KEY_SCROLLSPY);
+			if (savedScrollSpy !== null) {
+				scrollSpy = savedScrollSpy === 'true';
+			}
 		} catch (e) {
 			console.warn('Failed to load CellTable settings:', e);
 		}
-		return { columns, filtersVisible: filters };
+		return { columns, filtersVisible: filters, scrollSpyEnabled: scrollSpy };
 	}
 
 	// Save group setting
@@ -156,6 +169,16 @@
 		}
 	}
 
+	// Save scrollspy state
+	function saveScrollSpyState(enabled: boolean) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_SCROLLSPY, String(enabled));
+		} catch (e) {
+			console.warn('Failed to save scrollspy state:', e);
+		}
+	}
+
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
@@ -171,6 +194,10 @@
 	const persistedSettings = loadPersistedSettings();
 	let filtersVisible = $state(persistedSettings.filtersVisible);
 	let visibleColumns = $state<string[]>(persistedSettings.columns ?? getPresetVisibleFields(columnPreset));
+	
+	// ScrollSpy state - initialize from persisted settings
+	let scrollSpyGroups = $state<{ key: string; count: number }[]>([]);
+	let scrollSpyEnabled = $state(persistedSettings.scrollSpyEnabled);
 
 	// Update visible columns when preset changes (but not from storage load)
 	$effect(() => {
@@ -208,11 +235,42 @@
 
 	function handleDataChange(event: DataChangeEvent) {
 		filteredCount = event.filteredCount;
+		// Update scrollspy groups when data changes
+		updateScrollSpyGroups();
+	}
+
+	function updateScrollSpyGroups() {
+		if (scrollSpyEnabled && groupBy !== 'none') {
+			// Small delay to ensure table has updated
+			setTimeout(() => {
+				scrollSpyGroups = cellTable?.getGroups() ?? [];
+			}, 50);
+		} else {
+			scrollSpyGroups = [];
+		}
+	}
+
+	function handleScrollToGroup(key: string) {
+		cellTable?.scrollToGroup(key);
+	}
+
+	function handleToggleScrollSpy() {
+		scrollSpyEnabled = !scrollSpyEnabled;
+		saveScrollSpyState(scrollSpyEnabled);
+		if (scrollSpyEnabled && groupBy !== 'none') {
+			updateScrollSpyGroups();
+		} else {
+			scrollSpyGroups = [];
+		}
 	}
 
 	function handleGroupChange(group: CellTableGroupField) {
 		groupBy = group;
 		saveGroupSetting(group);
+		// Update scrollspy groups after grouping changes
+		if (scrollSpyEnabled) {
+			setTimeout(() => updateScrollSpyGroups(), 100);
+		}
 	}
 
 	function handlePresetChange(preset: ColumnPreset) {
@@ -353,6 +411,7 @@
 			{filteredCount}
 			{selectedCount}
 			{showExport}
+			{showJsonExport}
 			ongroupchange={handleGroupChange}
 			onpresetchange={handlePresetChange}
 			onexportcsv={handleExportCSV}
@@ -366,9 +425,40 @@
 			{visibleColumns}
 			oncolumnvisibilitychange={handleColumnVisibilityChange}
 			onresetcolumns={handleResetColumns}
+			{scrollSpyEnabled}
+			showScrollSpyToggle={showScrollSpy}
+			ontogglescrollspy={handleToggleScrollSpy}
 		/>
 	{/if}
 
+	<!-- ScrollSpy Navigation Bar -->
+	{#if scrollSpyEnabled && groupBy !== 'none' && scrollSpyGroups.length > 0}
+		<div class="scrollspy-bar d-flex align-items-center gap-2 px-3 py-2 bg-body-tertiary border-bottom overflow-auto">
+			<span class="text-muted small me-1">
+				<i class="bi bi-signpost-split"></i> Jump to:
+			</span>
+			{#each scrollSpyGroups as group (group.key)}
+				{@const bgColor = groupBy === 'tech' 
+					? (techColors?.[group.key] ?? DEFAULT_TECH_COLORS[group.key] ?? '#6c757d')
+					: groupBy === 'fband'
+						? (FBAND_COLORS[group.key] ?? '#6c757d')
+						: groupBy === 'status'
+							? (statusColors?.[group.key] ?? DEFAULT_STATUS_COLORS[group.key] ?? '#6c757d')
+							: '#6c757d'}
+				<button
+					type="button"
+					class="btn btn-sm scrollspy-badge"
+					style="background-color: {bgColor}; border-color: {bgColor}; color: white;"
+					onclick={() => handleScrollToGroup(group.key)}
+					title="Scroll to {group.key} ({group.count} cells)"
+				>
+					<span class="badge rounded-pill bg-light text-dark me-1">{group.count}</span>
+					{group.key}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
 	<!-- Main content with optional sidebar -->
 	<div class="content-area d-flex flex-grow-1 overflow-hidden">
 		<!-- Table -->
@@ -571,4 +661,37 @@
 	.panel-footer {
 		min-height: 48px;
 	}
+
+	/* ScrollSpy bar styling */
+	.scrollspy-bar {
+		min-height: 40px;
+		flex-wrap: nowrap;
+		scrollbar-width: thin;
+	}
+
+	.scrollspy-bar::-webkit-scrollbar {
+		height: 4px;
+	}
+
+	.scrollspy-bar::-webkit-scrollbar-thumb {
+		background: var(--bs-secondary-color, #6c757d);
+		border-radius: 2px;
+	}
+
+	.scrollspy-badge {
+		white-space: nowrap;
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		transition: transform 0.15s ease, box-shadow 0.15s ease;
+	}
+
+	.scrollspy-badge:hover {
+		transform: translateY(-1px);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		filter: brightness(1.1);
+	}
+
+	.scrollspy-badge:active {
+		transform: translateY(0);
+	}
 </style>

package/dist/core/CellTable/CellTablePanel.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     showToolbar?: boolean;
     /** Show export buttons */
     showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
     /** Technology color mapping */
     techColors?: TechColorMap;
     /** Status color mapping */
@@ -33,6 +35,8 @@ interface Props {
     persistSettings?: boolean;
     /** Storage key prefix for persisted settings */
     storageKey?: string;
+    /** Show scrollspy navigation bar for quick group navigation */
+    showScrollSpy?: boolean;
     /** Bindable reference to table methods */
     tableRef?: {
         redraw: () => void;

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -16,6 +16,8 @@
 		selectedCount?: number;
 		/** Show export buttons */
 		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
 		/** Show grouping dropdown */
 		showGrouping?: boolean;
 		/** Show preset dropdown */
@@ -46,6 +48,12 @@
 		oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
 		/** Reset columns to preset default */
 		onresetcolumns?: () => void;
+		/** Whether scrollspy is enabled */
+		scrollSpyEnabled?: boolean;
+		/** Show scrollspy toggle button */
+		showScrollSpyToggle?: boolean;
+		/** Toggle scrollspy event */
+		ontogglescrollspy?: () => void;
 	}
 
 	let {
@@ -55,6 +63,7 @@
 		filteredCount = 0,
 		selectedCount = 0,
 		showExport = true,
+		showJsonExport = false,
 		showGrouping = true,
 		showPresets = true,
 		ongroupchange,
@@ -69,7 +78,10 @@
 		columnMeta = [],
 		visibleColumns = [],
 		oncolumnvisibilitychange,
-		onresetcolumns
+		onresetcolumns,
+		scrollSpyEnabled = false,
+		showScrollSpyToggle = false,
+		ontogglescrollspy
 	}: Props = $props();
 
 	const groupOptions: { value: CellTableGroupField; label: string }[] = [
@@ -192,6 +204,19 @@
 
 	<!-- Actions -->
 	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#if showScrollSpyToggle}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!scrollSpyEnabled}
+				class:btn-secondary={scrollSpyEnabled}
+				onclick={ontogglescrollspy}
+				title={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+				aria-label={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+			>
+				<i class="bi bi-signpost-split"></i>
+			</button>
+		{/if}
 		{#if ontogglefilters}
 			<button
 				type="button"
@@ -228,15 +253,17 @@
 					<i class="bi bi-filetype-csv"></i>
 					<span class="d-none d-md-inline ms-1">CSV</span>
 				</button>
-				<button
-					type="button"
-					class="btn btn-sm btn-outline-primary"
-					onclick={onexportjson}
-					title="Export to JSON"
-				>
-					<i class="bi bi-filetype-json"></i>
-					<span class="d-none d-md-inline ms-1">JSON</span>
-				</button>
+				{#if showJsonExport}
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-primary"
+						onclick={onexportjson}
+						title="Export to JSON"
+					>
+						<i class="bi bi-filetype-json"></i>
+						<span class="d-none d-md-inline ms-1">JSON</span>
+					</button>
+				{/if}
 			</div>
 		{/if}
 	</div>

package/dist/core/CellTable/CellTableToolbar.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     selectedCount?: number;
     /** Show export buttons */
     showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
     /** Show grouping dropdown */
     showGrouping?: boolean;
     /** Show preset dropdown */
@@ -43,6 +45,12 @@ interface Props {
     oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
     /** Reset columns to preset default */
     onresetcolumns?: () => void;
+    /** Whether scrollspy is enabled */
+    scrollSpyEnabled?: boolean;
+    /** Show scrollspy toggle button */
+    showScrollSpyToggle?: boolean;
+    /** Toggle scrollspy event */
+    ontogglescrollspy?: () => void;
 }
 declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
 type CellTableToolbar = ReturnType<typeof CellTableToolbar>;

package/dist/core/CellTable/column-config.js

@@ -55,7 +55,7 @@ export const FBAND_COLORS = {
 export const COLUMN_GROUPS = {
     core: ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'],
     physical: ['antenna', 'azimuth', 'height', 'electricalTilt', 'beamwidth'],
-    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwtET', 'nwtPW', 'nwtRS', 'nwtBW'],
+    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwET', 'nwPW', 'nwRS', 'nwBW'],
     planning: ['planner', 'comment', 'onAirDate', 'type'],
     atoll: ['atollET', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
@@ -363,28 +363,28 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
         },
         {
             title: 'NWT P1',
-            field: 'nwtP1',
+            field: 'nwP1',
             width: 80,
             hozAlign: 'right',
             ...headerFilterParams,
         },
         {
             title: 'NWT P2',
-            field: 'nwtP2',
+            field: 'nwP2',
             width: 80,
             hozAlign: 'right',
             ...headerFilterParams,
         },
         {
-            title: 'NWT RS',
-            field: 'nwtRS',
+            title: 'NW RS',
+            field: 'nwRS',
             width: 80,
             hozAlign: 'right',
             ...headerFilterParams,
         },
         {
-            title: 'NWT BW',
-            field: 'nwtBW',
+            title: 'NW BW',
+            field: 'nwBW',
             width: 80,
             hozAlign: 'right',
             ...headerFilterParams,
@@ -428,7 +428,7 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             field: 'compareET',
             width: 110,
             hozAlign: 'center',
-            formatter: createCompareFormatter('atollET', 'nwtET'),
+            formatter: createCompareFormatter('atollET', 'nwET'),
             headerTooltip: 'Atoll ET | Network ET',
         },
         {
@@ -436,7 +436,7 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             field: 'comparePW',
             width: 110,
             hozAlign: 'center',
-            formatter: createCompareFormatter('atollPW', 'nwtPW'),
+            formatter: createCompareFormatter('atollPW', 'nwPW'),
             headerTooltip: 'Atoll PW | Network PW',
         },
         {
@@ -444,7 +444,7 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             field: 'compareRS',
             width: 110,
             hozAlign: 'center',
-            formatter: createCompareFormatter('atollRS', 'nwtRS'),
+            formatter: createCompareFormatter('atollRS', 'nwRS'),
             headerTooltip: 'Atoll RS | Network RS',
         },
         {
@@ -452,7 +452,7 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             field: 'compareBW',
             width: 110,
             hozAlign: 'center',
-            formatter: createCompareFormatter('atollBW', 'nwtBW'),
+            formatter: createCompareFormatter('atollBW', 'nwBW'),
             headerTooltip: 'Atoll BW | Network BW',
         },
         // Position columns
@@ -607,10 +607,10 @@ export function getColumnMetadata() {
         { field: 'cellID', title: 'Cell ID', group: 'Network' },
         { field: 'cellId2G', title: 'Cell ID 2G', group: 'Network' },
         { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
-        { field: 'nwtET', title: 'NWT ET', group: 'Network' },
-        { field: 'nwtPW', title: 'NWT PW', group: 'Network' },
-        { field: 'nwtRS', title: 'NWT RS', group: 'Network' },
-        { field: 'nwtBW', title: 'NWT BW', group: 'Network' },
+        { field: 'nwET', title: 'NW ET', group: 'Network' },
+        { field: 'nwPW', title: 'NW PW', group: 'Network' },
+        { field: 'nwRS', title: 'NW RS', group: 'Network' },
+        { field: 'nwBW', title: 'NW BW', group: 'Network' },
         // Atoll
         { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
         { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },

package/dist/core/CoverageMap/data/SiteStore.js

@@ -116,8 +116,8 @@ export class SiteStore {
                 availableTilts: ['0']
             };
         }
-        // Determine TX power (priority: atollPW > nwtPW > default)
-        const txPower = cell.atollPW || cell.nwtPW || 43; // Default to 43 dBm (20W)
+        // Determine TX power (priority: atollPW > nwPW > default)
+        const txPower = cell.atollPW || cell.nwPW || 43; // Default to 43 dBm (20W)
         // Determine frequency from band
         const frequency = antennaPattern.frequency || this.parseFrequency(cell.fband);
         // Get mechanical tilt (might need to parse from string)

package/dist/map-v2/demo/demo-cells.js

@@ -195,11 +195,11 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
                 // Network properties
                 cellId3: `${cellId}-3G`,
-                nwtP1: 20,
-                nwtP2: 40,
+                nwP1: 20,
+                nwP2: 40,
                 pci1: (cellCounter % 504), // Physical Cell ID for LTE
-                nwtRS: 450.0,
-                nwtBW: 10.0,
+                nwRS: 450.0,
+                nwBW: 10.0,
                 // Other
                 other: {
                     demoCell: true,

package/dist/map-v2/features/cells/types.d.ts

@@ -40,11 +40,11 @@ export interface Cell {
     atollRS: number;
     atollBW: number;
     cellId3: string;
-    nwtP1: number;
-    nwtP2: number;
+    nwP1: number;
+    nwP2: number;
     pci1: number;
-    nwtRS: number;
-    nwtBW: number;
+    nwRS: number;
+    nwBW: number;
     other?: Record<string, any>;
     customSubgroup: string;
 }

package/dist/shared/demo/cell-generator.js

@@ -206,11 +206,11 @@ export function generateCells(config) {
                     atollRS: 500.0 + (techBand.band === '700' ? 200 : 0),
                     atollBW: parseFloat(techBand.band) / 100,
                     rru: `RRU-${siteId}-${sector.sectorNum}`,
-                    nwtET: 40.0,
-                    nwtPW: 20,
+                    nwET: 40.0,
+                    nwPW: 20,
                     pci: cellCounter % 504,
-                    nwtRS: 450.0,
-                    nwtBW: 10.0,
+                    nwRS: 450.0,
+                    nwBW: 10.0,
                     other: {
                         city: ['Tehran', 'Shiraz', 'Isfahan', 'Mashhad', 'Tabriz'][siteNum % 5],
                         bcc: bandIndex % 8,

package/dist/shared/demo/cell-types.d.ts

@@ -39,10 +39,10 @@ export interface Cell {
     atollPW?: number;
     atollRS?: number;
     atollBW?: number;
-    nwtET?: number;
-    nwtPW?: number;
-    nwtRS?: number;
-    nwtBW?: number;
+    nwET?: number;
+    nwPW?: number;
+    nwRS?: number;
+    nwBW?: number;
     pci?: number;
     rru: string;
     other?: Record<string, unknown>;

package/package.json

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