@smartnet360/svelte-components 0.0.105 → 0.0.107

package/README.md

@@ -0,0 +1,75 @@
+# RF Tool Components
+
+Private SvelteKit component library for RF planning and network visualization tools.
+
+## Installation
+
+```bash
+npm install @smartnet360/svelte-components
+```
+
+## Components
+
+### Core Components (`@smartnet360/svelte-components/core`)
+
+| Component | Description |
+|-----------|-------------|
+| **Desktop** | Grid orchestrator for multi-panel layouts with component assignment |
+| **Charts** | Plotly-based chart system with tabs/scrollspy modes |
+| **CellTable** | Tabulator-based cell data table with grouping and filtering |
+| **TreeView** | Hierarchical tree component for data navigation |
+| **Settings** | Configuration panels and settings management |
+| **CoverageMap** | Coverage visualization component |
+
+### Map Components
+
+| Package | Description |
+|---------|-------------|
+| **map-v2** | Legacy map implementation |
+| **map-v3** | Current map implementation with cell/site features |
+
+### Shared Utilities (`@smartnet360/svelte-components/shared`)
+
+| Module | Description |
+|--------|-------------|
+| **demo** | Cell data generator with configurable presets (small/medium/large/xlarge) |
+| **ResizableSplitPanel** | Draggable split panel component |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run dev server
+npm run dev
+
+# Type checking
+npm run check
+
+# Build library
+npm run build
+
+# Release (patch/minor/major)
+npm run release:patch
+```
+
+## Demo Routes
+
+Demo pages available at `/apps/demo/`:
+- `/apps/demo/cell-table` - CellTable component
+- `/apps/demo/charts` - Charts component
+- `/apps/demo/desktop` - Desktop grid system
+
+## Tech Stack
+
+- **Svelte 5** with runes (`$state`, `$derived`, `$effect`)
+- **SvelteKit** library mode
+- **TypeScript** first
+- **Bootstrap 5** for styling
+- **Plotly.js** for charts
+- **Tabulator** for data tables
+
+## License
+
+Private - SmartNet360

package/dist/core/CellTable/CellTable.svelte

@@ -57,8 +57,11 @@
 	let table: Tabulator | null = null;
 	let isInitialized = $state(false);
 
-	// Reactive column configuration
-	let columns = $derived(getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters));
+	// Reactive column configuration - only changes when preset changes
+	let columns = $derived.by(() => {
+		// Only depend on columnPreset to avoid unnecessary recalculations
+		return getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
+	});
 
 	// Build Tabulator options
 	function buildOptions(): Options {
@@ -171,13 +174,7 @@
 		// Mark as initialized after table is ready
 		table.on('tableBuilt', () => {
 			isInitialized = true;
-		});
-	}
-
-	// Update table data when cells change
-	$effect(() => {
-		if (isInitialized && table && cells) {
-			table.replaceData(cells);
+			// Fire initial data change event
 			if (ondatachange) {
 				ondatachange({
 					type: 'load',
@@ -185,28 +182,52 @@
 					filteredCount: cells.length
 				});
 			}
+		});
+	}
+
+	// Track previous values to avoid unnecessary updates
+	let prevCellsLength = 0;
+	let prevCellsFirstId: string | null = null;
+	let prevGroupBy: string | null = null;
+	let prevColumnPreset: string | null = null;
+
+	// Update table data when cells actually change (not just reference)
+	$effect(() => {
+		const currentLength = cells?.length ?? 0;
+		const currentFirstId = cells?.[0]?.id ?? null;
+		
+		// Only update if length or first item changed (rough equality check)
+		if (isInitialized && table && 
+			(currentLength !== prevCellsLength || currentFirstId !== prevCellsFirstId)) {
+			prevCellsLength = currentLength;
+			prevCellsFirstId = currentFirstId;
+			table.replaceData(cells);
+			ondatachange?.({
+				type: 'load',
+				rowCount: cells.length,
+				filteredCount: cells.length
+			});
 		}
 	});
 
 	// Update grouping when groupBy changes
 	$effect(() => {
-		if (isInitialized && table) {
+		if (isInitialized && table && groupBy !== prevGroupBy) {
+			prevGroupBy = groupBy;
 			if (groupBy === 'none') {
 				table.setGroupBy(false);
 			} else {
 				table.setGroupBy(groupBy);
 				table.setGroupHeader(getGroupHeaderFormatter(groupBy));
 			}
-			// Force redraw after grouping change
-			table.redraw(true);
 		}
 	});
 
 	// Update columns when preset changes
 	$effect(() => {
-		if (isInitialized && table && columns) {
+		if (isInitialized && table && columnPreset !== prevColumnPreset) {
+			prevColumnPreset = columnPreset;
 			table.setColumns(columns);
-			table.redraw(true);
 		}
 	});
 
@@ -256,12 +277,63 @@
 	}
 
 	export function clearFilters(): void {
-		table?.clearFilter();
+		if (!table) return;
+		// Clear programmatic filters
+		table.clearFilter();
+		// Clear header filter inputs
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).clearHeaderFilter();
 	}
 
 	export function redraw(): void {
 		table?.redraw(true);
 	}
+
+	export function collapseAll(): void {
+		if (!table) return;
+		// Use setGroupStartOpen to collapse all groups, then refresh data to apply
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).setGroupStartOpen(false);
+		table.setData(table.getData());
+	}
+
+	export function expandAll(): void {
+		if (!table) return;
+		// Use setGroupStartOpen to expand all groups, then refresh data to apply
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).setGroupStartOpen(true);
+		table.setData(table.getData());
+	}
+
+	export function toggleHeaderFilters(visible: boolean): void {
+		if (!table) return;
+		const headerFiltersElement = tableContainer.querySelector('.tabulator-header-filter');
+		if (headerFiltersElement) {
+			// Toggle all header filter rows
+			const filterRows = tableContainer.querySelectorAll('.tabulator-col .tabulator-header-filter');
+			filterRows.forEach(el => {
+				(el as HTMLElement).style.display = visible ? '' : 'none';
+			});
+			table.redraw();
+		}
+	}
+
+	export function showColumn(field: string): void {
+		table?.showColumn(field);
+	}
+
+	export function hideColumn(field: string): void {
+		table?.hideColumn(field);
+	}
+
+	export function getVisibleColumns(): string[] {
+		if (!table) return [];
+		const columns = table.getColumns();
+		return columns
+			.filter(col => col.isVisible())
+			.map(col => col.getField())
+			.filter((field): field is string => !!field);
+	}
 </script>
 
 <div class="cell-table-container">

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

@@ -22,6 +22,12 @@ declare const CellTable: import("svelte").Component<Props, {
     setFilter: (field: string, type: string, value: unknown) => void;
     clearFilters: () => void;
     redraw: () => void;
+    collapseAll: () => void;
+    expandAll: () => void;
+    toggleHeaderFilters: (visible: boolean) => void;
+    showColumn: (field: string) => void;
+    hideColumn: (field: string) => void;
+    getVisibleColumns: () => string[];
 }, "">;
 type CellTable = ReturnType<typeof CellTable>;
 export default CellTable;

package/dist/core/CellTable/CellTableDemo.svelte

@@ -1,145 +1,101 @@
 <script lang="ts">
 	import CellTablePanel from './CellTablePanel.svelte';
-	import type { CellTableGroupField, ColumnPreset, RowClickEvent, RowSelectionEvent, CellData } from './types';
-	import { demoCells } from './demo-data';
+	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent } from './types';
+	import { generateCellsFromPreset, getGeneratorInfo, type GeneratorPreset } from '../../shared/demo';
 
+	let datasetSize: GeneratorPreset = $state('small');
+	let demoCells = $state(generateCellsFromPreset('small'));
+	let dataInfo = $derived(getGeneratorInfo(demoCells));
+	
 	let groupBy: CellTableGroupField = $state('none');
 	let columnPreset: ColumnPreset = $state('default');
-	let lastClickedCell: CellData | null = $state(null);
-	let selectedIds: string[] = $state([]);
-
-	function handleRowClick(event: RowClickEvent) {
-		lastClickedCell = event.row;
-		console.log('Row clicked:', event.row);
-	}
 
 	function handleSelectionChange(event: RowSelectionEvent) {
-		selectedIds = event.ids;
 		console.log('Selection changed:', event.ids);
 	}
+	
+	function regenerateData() {
+		demoCells = generateCellsFromPreset(datasetSize);
+	}
 </script>
 
-<div class="cell-table-demo container-fluid py-3">
-	<div class="row mb-3">
-		<div class="col">
-			<h2 class="d-flex align-items-center gap-2">
-				<i class="bi bi-table text-primary"></i>
-				CellTable Component Demo
-			</h2>
-			<p class="text-muted">
-				A Bootstrap-themed Tabulator wrapper for displaying cell data with grouping, filtering, and export capabilities.
-			</p>
+<div class="cell-table-page vh-100 d-flex flex-column">
+	<!-- Simple header for demo controls only -->
+	<div class="demo-controls bg-light border-bottom px-3 py-2 d-flex align-items-center gap-3 flex-wrap">
+		<div class="input-group input-group-sm" style="width: auto;">
+			<span class="input-group-text">Dataset</span>
+			<select class="form-select" bind:value={datasetSize} onchange={regenerateData}>
+				<option value="small">Small (~300)</option>
+				<option value="medium">Medium (~3K)</option>
+				<option value="large">Large (~15K)</option>
+				<option value="xlarge">XLarge (~60K)</option>
+			</select>
 		</div>
+		<span class="badge bg-info">
+			{dataInfo.totalCells.toLocaleString()} cells | {dataInfo.totalSites} sites
+		</span>
+		<span class="badge bg-secondary d-none d-md-inline">
+			{Object.entries(dataInfo.techBreakdown).map(([k, v]) => `${k}: ${v}`).join(' | ')}
+		</span>
 	</div>
 
-	<div class="row" style="height: calc(100vh - 200px);">
-		<div class="col-12 col-lg-9 h-100">
-			<CellTablePanel
-				cells={demoCells}
-				bind:groupBy
-				bind:columnPreset
-				selectable={true}
-				multiSelect={true}
-				title="Cell Data Table"
-				showToolbar={true}
-				showExport={true}
-				headerFilters={true}
-				onrowclick={handleRowClick}
-				onselectionchange={handleSelectionChange}
-			>
-				{#snippet footer({ selectedRows, selectedCount })}
-					<div class="d-flex align-items-center justify-content-between">
-						<span class="text-muted small">
-							{#if selectedCount > 0}
-								{selectedCount} cell(s) selected
-							{:else}
-								Click rows to select
-							{/if}
-						</span>
-						<div class="btn-group">
-							<button
-								type="button"
-								class="btn btn-sm btn-outline-primary"
-								disabled={selectedCount === 0}
-								onclick={() => console.log('Process:', selectedRows.map(r => r.id))}
-							>
-								<i class="bi bi-gear"></i> Process Selected
-							</button>
-							<button
-								type="button"
-								class="btn btn-sm btn-outline-secondary"
-								disabled={selectedCount === 0}
-								onclick={() => console.log('View:', selectedRows.map(r => r.id))}
-							>
-								<i class="bi bi-eye"></i> View Details
-							</button>
-						</div>
+	<!-- CellTablePanel with integrated sidebar -->
+	<div class="flex-grow-1 overflow-hidden">
+		<CellTablePanel
+			cells={demoCells}
+			bind:groupBy
+			bind:columnPreset
+			selectable={true}
+			multiSelect={true}
+			showToolbar={true}
+			showExport={true}
+			headerFilters={true}
+			showDetailsSidebar={true}
+			sidebarWidth={320}
+			title="Cell Data"
+			onselectionchange={handleSelectionChange}
+		>
+			{#snippet footer({ selectedRows, selectedCount })}
+				<div class="d-flex align-items-center justify-content-between">
+					<span class="text-muted small">
+						{#if selectedCount > 0}
+							{selectedCount} cell(s) selected
+						{:else}
+							Click a row to view details
+						{/if}
+					</span>
+					<div class="btn-group">
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-primary"
+							disabled={selectedCount === 0}
+							onclick={() => console.log('Process:', selectedRows.map(r => r.id))}
+						>
+							<i class="bi bi-gear"></i>
+							<span class="d-none d-sm-inline ms-1">Process</span>
+						</button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-secondary"
+							disabled={selectedCount === 0}
+							onclick={() => console.log('Export:', selectedRows.map(r => r.id))}
+						>
+							<i class="bi bi-download"></i>
+							<span class="d-none d-sm-inline ms-1">Export</span>
+						</button>
 					</div>
-				{/snippet}
-			</CellTablePanel>
-		</div>
-
-		<div class="col-12 col-lg-3 h-100 overflow-auto">
-			<div class="card h-100">
-				<div class="card-header">
-					<h6 class="mb-0">
-						<i class="bi bi-info-circle"></i> Cell Details
-					</h6>
 				</div>
-				<div class="card-body">
-					{#if lastClickedCell}
-						<dl class="row mb-0 small">
-							<dt class="col-5">ID</dt>
-							<dd class="col-7"><code>{lastClickedCell.id}</code></dd>
-
-							<dt class="col-5">Cell Name</dt>
-							<dd class="col-7">{lastClickedCell.cellName}</dd>
-
-							<dt class="col-5">Site</dt>
-							<dd class="col-7">{lastClickedCell.siteId}</dd>
-
-							<dt class="col-5">Technology</dt>
-							<dd class="col-7">
-								<span class="badge bg-secondary">{lastClickedCell.tech}</span>
-							</dd>
-
-							<dt class="col-5">Band</dt>
-							<dd class="col-7">
-								<span class="badge bg-info">{lastClickedCell.fband}</span>
-							</dd>
-
-							<dt class="col-5">Status</dt>
-							<dd class="col-7">
-								<span class="badge bg-success">{lastClickedCell.status.replace(/_/g, ' ')}</span>
-							</dd>
-
-							<dt class="col-5">Azimuth</dt>
-							<dd class="col-7">{lastClickedCell.azimuth}°</dd>
-
-							<dt class="col-5">Height</dt>
-							<dd class="col-7">{lastClickedCell.height}m</dd>
-
-							<dt class="col-5">Antenna</dt>
-							<dd class="col-7 text-truncate" title={lastClickedCell.antenna}>
-								{lastClickedCell.antenna}
-							</dd>
-
-							<dt class="col-5">Planner</dt>
-							<dd class="col-7">{lastClickedCell.planner}</dd>
-
-							{#if lastClickedCell.comment}
-								<dt class="col-5">Comment</dt>
-								<dd class="col-7 text-muted">{lastClickedCell.comment}</dd>
-							{/if}
-						</dl>
-					{:else}
-						<p class="text-muted text-center">
-							<i class="bi bi-hand-index"></i><br>
-							Click a row to see details
-						</p>
-					{/if}
-				</div>
-			</div>
-		</div>
+			{/snippet}
+		</CellTablePanel>
 	</div>
 </div>
+
+<style>
+	.cell-table-page {
+		background: var(--bs-body-bg, #f8f9fa);
+	}
+
+	.demo-controls {
+		flex-shrink: 0;
+	}
+</style>