@smartnet360/svelte-components 0.0.104 → 0.0.106

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/CellTableDemo.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import CellTablePanel from './CellTablePanel.svelte';
+	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');
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		console.log('Selection changed:', event.ids);
+	}
+	
+	function regenerateData() {
+		demoCells = generateCellsFromPreset(datasetSize);
+	}
+</script>
+
+<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>
+
+	<!-- 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>
+				</div>
+			{/snippet}
+		</CellTablePanel>
+	</div>
+</div>
+
+<style>
+	.cell-table-page {
+		background: var(--bs-body-bg, #f8f9fa);
+	}
+
+	.demo-controls {
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,3 @@
+declare const CellTableDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type CellTableDemo = ReturnType<typeof CellTableDemo>;
+export default CellTableDemo;

package/dist/core/CellTable/CellTablePanel.svelte

@@ -39,6 +39,12 @@
 		headerFilters?: boolean;
 		/** Panel title */
 		title?: string;
+		/** Show details sidebar */
+		showDetailsSidebar?: boolean;
+		/** Sidebar width in pixels */
+		sidebarWidth?: number;
+		/** Bindable reference to table methods */
+		tableRef?: { redraw: () => void } | null;
 		/** Row selection change event */
 		onselectionchange?: (event: RowSelectionEvent) => void;
 		/** Row click event */
@@ -49,6 +55,8 @@
 		headerActions?: Snippet;
 		/** Custom footer slot */
 		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
+		/** Custom details sidebar content */
+		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
 	}
 
 	let {
@@ -64,17 +72,32 @@
 		statusColors,
 		headerFilters = true,
 		title = 'Cell Data',
+		showDetailsSidebar = false,
+		sidebarWidth = 320,
+		tableRef = $bindable(null),
 		onselectionchange,
 		onrowclick,
 		onrowdblclick,
 		headerActions,
-		footer
+		footer,
+		detailsContent
 	}: Props = $props();
 
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
 	let filteredCount = $state(cells.length);
+	let sidebarOpen = $state(false);
+	let clickedCell: CellData | null = $state(null);
+
+	// Expose table methods via tableRef
+	$effect(() => {
+		if (cellTable) {
+			tableRef = {
+				redraw: () => cellTable?.redraw()
+			};
+		}
+	});
 
 	function handleSelectionChange(event: RowSelectionEvent) {
 		selectedCount = event.rows.length;
@@ -82,6 +105,15 @@
 		onselectionchange?.(event);
 	}
 
+	function handleRowClick(event: RowClickEvent) {
+		if (showDetailsSidebar) {
+			clickedCell = event.row;
+			sidebarOpen = true;
+			setTimeout(() => cellTable?.redraw(), 320);
+		}
+		onrowclick?.(event);
+	}
+
 	function handleDataChange(event: DataChangeEvent) {
 		filteredCount = event.filteredCount;
 	}
@@ -106,6 +138,16 @@
 		cellTable?.clearFilters();
 	}
 
+	function toggleSidebar() {
+		sidebarOpen = !sidebarOpen;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
+	function closeSidebar() {
+		sidebarOpen = false;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
 	// Expose table methods
 	export function getSelectedRows(): CellData[] {
 		return cellTable?.getSelectedRows() ?? [];
@@ -122,6 +164,11 @@
 	export function redraw(): void {
 		cellTable?.redraw();
 	}
+
+	export function openSidebar(): void {
+		sidebarOpen = true;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
 </script>
 
 <div class="cell-table-panel d-flex flex-column" style:height>
@@ -131,11 +178,24 @@
 			<i class="bi bi-table text-primary"></i>
 			{title}
 		</h6>
-		{#if headerActions}
-			<div class="header-actions">
-				{@render headerActions()}
-			</div>
-		{/if}
+		<div class="d-flex align-items-center gap-2">
+			{#if headerActions}
+				<div class="header-actions">
+					{@render headerActions()}
+				</div>
+			{/if}
+			{#if showDetailsSidebar}
+				<button 
+					class="btn btn-sm"
+					class:btn-outline-secondary={!sidebarOpen}
+					class:btn-secondary={sidebarOpen}
+					onclick={toggleSidebar}
+					title={sidebarOpen ? 'Hide details' : 'Show details'}
+				>
+					<i class="bi" class:bi-layout-sidebar-reverse={!sidebarOpen} class:bi-x-lg={sidebarOpen}></i>
+				</button>
+			{/if}
+		</div>
 	</div>
 
 	<!-- Toolbar -->
@@ -155,24 +215,132 @@
 		/>
 	{/if}
 
-	<!-- Table -->
-	<div class="table-wrapper flex-grow-1">
-		<CellTable
-			bind:this={cellTable}
-			{cells}
-			{groupBy}
-			{columnPreset}
-			{selectable}
-			{multiSelect}
-			height="100%"
-			{techColors}
-			{statusColors}
-			{headerFilters}
-			onselectionchange={handleSelectionChange}
-			ondatachange={handleDataChange}
-			{onrowclick}
-			{onrowdblclick}
-		/>
+	<!-- Main content with optional sidebar -->
+	<div class="content-area d-flex flex-grow-1 overflow-hidden">
+		<!-- Table -->
+		<div class="table-wrapper flex-grow-1 overflow-hidden">
+			<CellTable
+				bind:this={cellTable}
+				{cells}
+				{groupBy}
+				{columnPreset}
+				{selectable}
+				{multiSelect}
+				height="100%"
+				{techColors}
+				{statusColors}
+				{headerFilters}
+				onselectionchange={handleSelectionChange}
+				ondatachange={handleDataChange}
+				onrowclick={handleRowClick}
+				{onrowdblclick}
+			/>
+		</div>
+
+		<!-- Details Sidebar -->
+		{#if showDetailsSidebar}
+			<aside 
+				class="details-sidebar border-start bg-white overflow-auto"
+				class:open={sidebarOpen}
+				style:--sidebar-width="{sidebarWidth}px"
+			>
+				<div class="sidebar-content" style:width="{sidebarWidth}px">
+					<div class="d-flex align-items-center justify-content-between p-3 border-bottom bg-light sticky-top">
+						<h6 class="mb-0">
+							<i class="bi bi-info-circle text-primary"></i> Details
+						</h6>
+						<button 
+							class="btn btn-sm btn-outline-secondary" 
+							onclick={closeSidebar}
+							title="Close"
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					</div>
+					
+					<div class="p-3">
+						{#if detailsContent}
+							{@render detailsContent({ cell: clickedCell, closeSidebar })}
+						{:else if clickedCell}
+							<!-- Default details view -->
+							<dl class="row mb-0 small">
+								<dt class="col-5 text-muted">ID</dt>
+								<dd class="col-7"><code class="text-primary">{clickedCell.id}</code></dd>
+
+								<dt class="col-5 text-muted">Cell Name</dt>
+								<dd class="col-7 fw-medium">{clickedCell.cellName}</dd>
+
+								<dt class="col-5 text-muted">Site</dt>
+								<dd class="col-7">{clickedCell.siteId}</dd>
+
+								<dt class="col-5 text-muted">Technology</dt>
+								<dd class="col-7">
+									<span class="badge bg-secondary">{clickedCell.tech}</span>
+								</dd>
+
+								<dt class="col-5 text-muted">Band</dt>
+								<dd class="col-7">
+									<span class="badge bg-info">{clickedCell.fband}</span>
+								</dd>
+
+								<dt class="col-5 text-muted">Frequency</dt>
+								<dd class="col-7">{clickedCell.frq} MHz</dd>
+
+								<dt class="col-5 text-muted">Status</dt>
+								<dd class="col-7">
+									<span class="badge bg-success">{clickedCell.status.replace(/_/g, ' ')}</span>
+								</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Physical</dt>
+								
+								<dt class="col-5 text-muted">Azimuth</dt>
+								<dd class="col-7">{clickedCell.azimuth}°</dd>
+
+								<dt class="col-5 text-muted">Height</dt>
+								<dd class="col-7">{clickedCell.height}m</dd>
+
+								<dt class="col-5 text-muted">Beamwidth</dt>
+								<dd class="col-7">{clickedCell.beamwidth}°</dd>
+
+								<dt class="col-5 text-muted">E-Tilt</dt>
+								<dd class="col-7">{clickedCell.electricalTilt}°</dd>
+
+								<dt class="col-5 text-muted">Antenna</dt>
+								<dd class="col-7 text-truncate" title={clickedCell.antenna}>
+									{clickedCell.antenna}
+								</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Location</dt>
+								
+								<dt class="col-5 text-muted">Latitude</dt>
+								<dd class="col-7">{clickedCell.latitude.toFixed(6)}</dd>
+
+								<dt class="col-5 text-muted">Longitude</dt>
+								<dd class="col-7">{clickedCell.longitude.toFixed(6)}</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Planning</dt>
+
+								<dt class="col-5 text-muted">Planner</dt>
+								<dd class="col-7">{clickedCell.planner}</dd>
+
+								<dt class="col-5 text-muted">On Air</dt>
+								<dd class="col-7">{clickedCell.onAirDate}</dd>
+
+								{#if clickedCell.comment}
+									<dt class="col-5 text-muted">Comment</dt>
+									<dd class="col-7 fst-italic">{clickedCell.comment}</dd>
+								{/if}
+							</dl>
+						{:else}
+							<div class="text-center text-muted py-5">
+								<i class="bi bi-hand-index fs-1 opacity-50"></i>
+								<p class="mt-2 mb-0">Click a row to see details</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</aside>
+		{/if}
 	</div>
 
 	<!-- Footer -->
@@ -200,9 +368,26 @@
 		color: var(--bs-body-color, #212529);
 	}
 
+	.content-area {
+		min-height: 0;
+	}
+
 	.table-wrapper {
 		min-height: 0;
-		overflow: hidden;
+		transition: all 0.3s ease;
+	}
+
+	.details-sidebar {
+		width: 0;
+		min-width: 0;
+		opacity: 0;
+		transition: width 0.3s ease, opacity 0.3s ease, min-width 0.3s ease;
+	}
+
+	.details-sidebar.open {
+		width: var(--sidebar-width, 320px);
+		min-width: var(--sidebar-width, 320px);
+		opacity: 1;
 	}
 
 	.panel-footer {

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

@@ -25,6 +25,14 @@ interface Props {
     headerFilters?: boolean;
     /** Panel title */
     title?: string;
+    /** Show details sidebar */
+    showDetailsSidebar?: boolean;
+    /** Sidebar width in pixels */
+    sidebarWidth?: number;
+    /** Bindable reference to table methods */
+    tableRef?: {
+        redraw: () => void;
+    } | null;
     /** Row selection change event */
     onselectionchange?: (event: RowSelectionEvent) => void;
     /** Row click event */
@@ -38,12 +46,18 @@ interface Props {
         selectedRows: CellData[];
         selectedCount: number;
     }]>;
+    /** Custom details sidebar content */
+    detailsContent?: Snippet<[{
+        cell: CellData | null;
+        closeSidebar: () => void;
+    }]>;
 }
 declare const CellTablePanel: import("svelte").Component<Props, {
     getSelectedRows: () => CellData[];
     clearSelection: () => void;
     scrollToRow: (id: string) => void;
     redraw: () => void;
-}, "groupBy" | "columnPreset">;
+    openSidebar: () => void;
+}, "groupBy" | "columnPreset" | "tableRef">;
 type CellTablePanel = ReturnType<typeof CellTablePanel>;
 export default CellTablePanel;

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

@@ -6,5 +6,7 @@
 export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableDemo } from './CellTableDemo.svelte';
+export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
 export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
 export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

package/dist/core/CellTable/index.js

@@ -7,5 +7,10 @@
 export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableDemo } from './CellTableDemo.svelte';
+// Re-export shared demo data utilities for convenience
+// Note: Cell type is NOT re-exported here to avoid conflicts with map-v2
+// Import Cell from '$lib/shared/demo' or '@smartnet360/svelte-components' directly
+export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS } from '../../shared/demo';
 // Configuration utilities
 export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

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

@@ -4,56 +4,15 @@
  * Types for the Tabulator-based cell data table component
  */
 import type { ColumnDefinition, Options } from 'tabulator-tables';
+import type { Cell, CellGroupingField } from '../../shared/demo';
 /**
- * Cell data model - represents a radio cell/sector
- * Imported from map-v3 cells feature for consistency
+ * Cell data model - re-exported from shared for convenience
  */
-export interface CellData {
-    id: string;
-    txId: string;
-    cellID: string;
-    cellID2G: string;
-    cellName: string;
-    siteId: string;
-    tech: string;
-    fband: string;
-    frq: string;
-    type: string;
-    status: string;
-    onAirDate: string;
-    bcch: number;
-    ctrlid: string;
-    dlEarfn: number;
-    antenna: string;
-    azimuth: number;
-    height: number;
-    electricalTilt: string;
-    beamwidth: number;
-    latitude: number;
-    longitude: number;
-    dx: number;
-    dy: number;
-    siteLatitude: number;
-    siteLongitude: number;
-    comment: string;
-    planner: string;
-    atollETP: number;
-    atollPW: number;
-    atollRS: number;
-    atollBW: number;
-    cellId3: string;
-    nwtP1: number;
-    nwtP2: number;
-    pci1: number;
-    nwtRS: number;
-    nwtBW: number;
-    other?: Record<string, unknown>;
-    customSubgroup: string;
-}
+export type CellData = Cell;
 /**
- * Available grouping fields for the table
+ * Available grouping fields for the table - extends shared type with 'none' option
  */
-export type CellTableGroupField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';
+export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
  */

package/dist/map-v3/demo/demo-cells.d.ts

@@ -1,14 +1,18 @@
 /**
- * Demo Cell Data
+ * Demo Cell Data - Map V3
  *
- * 100 sites across San Francisco Bay Area
- * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
- * Each sector has 12 cells (all tech-band combinations)
- * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
- */
-import type { Cell } from '../features/cells/types';
-/**
- * Generate demo cells with varied density patterns in circular distribution
- * Creates density zones radiating from center with random placement
+ * Uses the shared cell generator to create demo data.
+ * Default: 2000 sites, ~60k cells across Budapest area.
+ *
+ * Structure:
+ * - CellName format: 7-digit numeric (e.g., "1000141")
+ * - Format: SSSS (site) + S (sector 1-3) + BB (band 41-51)
+ * - Site ID range: 1000-2999
+ * - Example Site 1000:
+ *   - Sector 1 (0°):   1000141-1000151 (11 bands)
+ *   - Sector 2 (120°): 1000241-1000251 (11 bands)
+ *   - Sector 3 (240°): 1000341-1000351 (11 bands)
  */
+import { type Cell } from '../../shared/demo';
 export declare const demoCells: Cell[];
+export type { Cell } from '../../shared/demo';