@smartnet360/svelte-components 0.0.124 → 0.0.126

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

@@ -0,0 +1,21 @@
+/**
+ * Demo Custom Cells Data
+ *
+ * Sample CSV content for testing custom cells feature.
+ * Uses txIds from the demo cells data.
+ *
+ * txId format: SSSS S BB where:
+ * - SSSS = site number (1000+)
+ * - S = sector (1, 2, or 3)
+ * - BB = band index (41-51)
+ *   41=GSM900, 42=GSM1800, 43=LTE700, 44=LTE800, 45=LTE900
+ *   46=LTE1800, 47=LTE2100, 48=LTE2600, 49=5G700, 50=5G2100, 51=5G3500
+ */
+/**
+ * Sample CSV content with various groups and size factors
+ */
+export declare const demoCustomCellsCsv = "txId,customGroup,sizeFactor,congestion,trafficGB\n1000141,High Traffic,3,critical,250\n1000241,High Traffic,2.5,high,180\n1000341,High Traffic,2,medium,120\n1001145,High Traffic,3.5,critical,300\n1001245,High Traffic,2,medium,100\n1002147,Medium Traffic,1.5,low,60\n1002247,Medium Traffic,1.2,low,45\n1002347,Medium Traffic,1,minimal,30\n1003142,Medium Traffic,1.5,low,55\n1003242,Medium Traffic,1.3,low,40\n1004151,Low Traffic,0.8,minimal,15\n1004251,Low Traffic,0.7,minimal,10\n1004351,Low Traffic,0.6,minimal,8\n1005149,Problem Cells,2,error,0\n1005249,Problem Cells,2,error,0\n1006144,Problem Cells,1.8,warning,5\n";
+/**
+ * Another sample CSV with different groupings
+ */
+export declare const demoCustomCellsCsv2 = "txId,customGroup,sizeFactor,priority\n1010141,Expansion Zone A,2,high\n1010241,Expansion Zone A,2,high\n1010341,Expansion Zone A,2,high\n1011145,Expansion Zone A,1.5,medium\n1012147,Expansion Zone B,1.8,high\n1012247,Expansion Zone B,1.8,high\n1013142,Existing Coverage,1,low\n1013242,Existing Coverage,1,low\n1013342,Existing Coverage,1,low\n";

package/dist/map-v3/demo/demo-custom-cells.js

@@ -0,0 +1,48 @@
+/**
+ * Demo Custom Cells Data
+ *
+ * Sample CSV content for testing custom cells feature.
+ * Uses txIds from the demo cells data.
+ *
+ * txId format: SSSS S BB where:
+ * - SSSS = site number (1000+)
+ * - S = sector (1, 2, or 3)
+ * - BB = band index (41-51)
+ *   41=GSM900, 42=GSM1800, 43=LTE700, 44=LTE800, 45=LTE900
+ *   46=LTE1800, 47=LTE2100, 48=LTE2600, 49=5G700, 50=5G2100, 51=5G3500
+ */
+/**
+ * Sample CSV content with various groups and size factors
+ */
+export const demoCustomCellsCsv = `txId,customGroup,sizeFactor,congestion,trafficGB
+1000141,High Traffic,3,critical,250
+1000241,High Traffic,2.5,high,180
+1000341,High Traffic,2,medium,120
+1001145,High Traffic,3.5,critical,300
+1001245,High Traffic,2,medium,100
+1002147,Medium Traffic,1.5,low,60
+1002247,Medium Traffic,1.2,low,45
+1002347,Medium Traffic,1,minimal,30
+1003142,Medium Traffic,1.5,low,55
+1003242,Medium Traffic,1.3,low,40
+1004151,Low Traffic,0.8,minimal,15
+1004251,Low Traffic,0.7,minimal,10
+1004351,Low Traffic,0.6,minimal,8
+1005149,Problem Cells,2,error,0
+1005249,Problem Cells,2,error,0
+1006144,Problem Cells,1.8,warning,5
+`;
+/**
+ * Another sample CSV with different groupings
+ */
+export const demoCustomCellsCsv2 = `txId,customGroup,sizeFactor,priority
+1010141,Expansion Zone A,2,high
+1010241,Expansion Zone A,2,high
+1010341,Expansion Zone A,2,high
+1011145,Expansion Zone A,1.5,medium
+1012147,Expansion Zone B,1.8,high
+1012247,Expansion Zone B,1.8,high
+1013142,Existing Coverage,1,low
+1013242,Existing Coverage,1,low
+1013342,Existing Coverage,1,low
+`;

package/dist/map-v3/features/cells/custom/components/CustomCellFilterControl.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	/**
+	 * Custom Cell Filter Control
+	 * 
+	 * TreeView with color pickers for a single custom cell set.
+	 * Shows groups with their cell counts and allows color customization.
+	 */
+	import { untrack, onDestroy } from 'svelte';
+	import { MapControl } from '../../../../shared';
+	import { createTreeStore, TreeView } from '../../../../../core/TreeView';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellSet } from '../types';
+	import { buildCustomCellTree } from '../logic/tree-adapter';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** The specific set to display */
+		set: CustomCellSet;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Callback when set is removed */
+		onremove?: (setId: string) => void;
+	}
+
+	let { 
+		setsStore, 
+		set, 
+		position = 'top-left',
+		onremove
+	}: Props = $props();
+
+	// Reference to MapControl for explicit cleanup
+	let mapControlRef: MapControl | undefined;
+
+	// Track if this component should be destroyed (used for delayed removal)
+	let isDestroying = $state(false);
+
+	onDestroy(() => {
+		console.log(`[CustomCellFilterControl] onDestroy called for set: ${set.id}`);
+	});
+
+	// Build tree from set
+	let treeStore = $derived.by(() => {
+		const _version = setsStore.version;
+		const _set = set;
+		
+		return untrack(() => {
+			const nodes = buildCustomCellTree(_set);
+			return createTreeStore({
+				nodes,
+				namespace: `custom-cells:${_set.id}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	// Sync tree selection -> store visibility
+	$effect(() => {
+		const val = treeStore;
+		let changes = 0;
+
+		val.state.nodes.forEach((nodeState) => {
+			// Skip root node
+			if (nodeState.node.id === `root-${set.id}`) return;
+			// Skip folder nodes
+			if (nodeState.node.children && nodeState.node.children.length > 0) return;
+
+			const groupId = nodeState.node.metadata?.groupId;
+			if (!groupId) return;
+
+			const isVisible = val.state.checkedPaths.has(nodeState.path);
+			const currentlyVisible = set.visibleGroups.has(groupId);
+
+			if (isVisible !== currentlyVisible) {
+				setsStore.toggleGroupVisibility(set.id, groupId);
+				changes++;
+			}
+		});
+
+		if (changes > 0) {
+			console.log(`[CustomCellFilterControl] Synced ${changes} visibility changes`);
+		}
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		setsStore.setGroupColor(set.id, groupId, input.value);
+	}
+
+	function handleRemove() {
+		if (onremove) {
+			onremove(set.id);
+		}
+	}
+
+	function handleToggleVisibility() {
+		setsStore.toggleSetVisibility(set.id);
+	}
+</script>
+
+<MapControl {position} title={set.name} icon="layers" controlWidth="280px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-secondary border-0 p-1 px-2"
+			title={set.visible ? 'Hide Layer' : 'Show Layer'}
+			onclick={handleToggleVisibility}
+		>
+			<i class="bi bi-eye{set.visible ? '-fill' : '-slash'}"></i>
+		</button>
+		<button
+			class="btn btn-sm btn-outline-danger border-0 p-1 px-2"
+			title="Remove Set"
+			onclick={handleRemove}
+		>
+			<i class="bi bi-trash"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-cell-filter-control">
+		<!-- Set Info -->
+		<div class="set-info mb-2 px-1">
+			<small class="text-muted">
+				{set.cells.length} cells in {set.groups.length} groups
+				{#if set.unmatchedTxIds.length > 0}
+					<span class="text-warning ms-1" title="Some cells not found">
+						({set.unmatchedTxIds.length} unmatched)
+					</span>
+				{/if}
+			</small>
+		</div>
+
+		<!-- Size Slider -->
+		<div class="size-control mb-2 px-1">
+			<label for="baseSize-{set.id}" class="form-label small mb-1">
+				Base Size: {set.baseSize}px
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="baseSize-{set.id}"
+				min="10"
+				max="150"
+				step="5"
+				value={set.baseSize}
+				oninput={(e) => setsStore.updateSetSettings(set.id, { 
+					baseSize: parseInt((e.target as HTMLInputElement).value) 
+				})}
+			/>
+		</div>
+
+		<!-- Opacity Slider -->
+		<div class="opacity-control mb-2 px-1">
+			<label for="opacity-{set.id}" class="form-label small mb-1">
+				Opacity: {Math.round(set.opacity * 100)}%
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="opacity-{set.id}"
+				min="0.1"
+				max="1"
+				step="0.1"
+				value={set.opacity}
+				oninput={(e) => setsStore.updateSetSettings(set.id, { 
+					opacity: parseFloat((e.target as HTMLInputElement).value) 
+				})}
+			/>
+		</div>
+
+		<!-- Tree View -->
+		<div class="custom-cell-tree">
+			{#if set.cells.length === 0}
+				<div class="text-muted p-3 text-center small">
+					No cells in this set.
+				</div>
+			{:else}
+				<TreeView showControls={false} store={treeStore} height="200px">
+					{#snippet children({ node, state })}
+						<!-- Color Picker (Only for group leaves) -->
+						{#if (!node.children || node.children.length === 0) && node.metadata?.groupId !== '__root__'}
+							<div 
+								class="d-flex align-items-center" 
+								role="group" 
+								onclick={(e) => e.stopPropagation()} 
+								onkeydown={(e) => e.stopPropagation()}
+							>
+								<input 
+									type="color" 
+									class="form-control form-control-color form-control-sm border-0 p-0" 
+									style="width: 16px; height: 16px; min-height: 0;"
+									value={node.metadata?.color}
+									oninput={(e) => handleColorChange(node.metadata?.groupId || '', e)}
+									title="Change color"
+								/>
+							</div>
+						{/if}
+					{/snippet}
+				</TreeView>
+			{/if}
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.custom-cell-filter-control {
+		font-size: 0.875rem;
+	}
+
+	.set-info {
+		border-bottom: 1px solid var(--bs-border-color, #dee2e6);
+		padding-bottom: 0.5rem;
+	}
+
+	.custom-cell-tree {
+		max-height: 250px;
+		overflow-y: auto;
+	}
+</style>

package/dist/map-v3/features/cells/custom/components/CustomCellFilterControl.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+import type { CustomCellSet } from '../types';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** The specific set to display */
+    set: CustomCellSet;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Callback when set is removed */
+    onremove?: (setId: string) => void;
+}
+declare const CustomCellFilterControl: import("svelte").Component<Props, {}, "">;
+type CustomCellFilterControl = ReturnType<typeof CustomCellFilterControl>;
+export default CustomCellFilterControl;

package/dist/map-v3/features/cells/custom/components/CustomCellSetManager.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	/**
+	 * Custom Cell Set Manager
+	 * 
+	 * Upload CSV files, view import results, and manage custom cell sets.
+	 * Acts as the main control panel for the custom cells feature.
+	 * Includes filter controls for each loaded set.
+	 */
+	import { MapControl } from '../../../../shared';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellImportResult } from '../types';
+	import CustomCellFilterControl from './CustomCellFilterControl.svelte';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { 
+		setsStore, 
+		position = 'top-left' 
+	}: Props = $props();
+
+	// Derived for reactivity
+	let setsArray = $derived(setsStore.sets);
+
+	// State
+	let showImportModal = $state(false);
+	let importResult = $state<CustomCellImportResult | null>(null);
+	let importFileName = $state('');
+	let importError = $state('');
+	let fileInput: HTMLInputElement;
+
+	/**
+	 * Handle file selection
+	 */
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		
+		if (!file) return;
+		
+		importFileName = file.name.replace(/\.csv$/i, '');
+		importError = '';
+
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			try {
+				const content = e.target?.result as string;
+				importResult = setsStore.importFromCsv(content, file.name);
+				showImportModal = true;
+			} catch (err) {
+				importError = err instanceof Error ? err.message : 'Failed to parse CSV';
+				importResult = null;
+			}
+		};
+		reader.onerror = () => {
+			importError = 'Failed to read file';
+			importResult = null;
+		};
+		reader.readAsText(file);
+
+		// Reset input so same file can be selected again
+		input.value = '';
+	}
+
+	/**
+	 * Confirm import and create set
+	 */
+	function confirmImport() {
+		if (!importResult) return;
+
+		setsStore.createSet(importFileName, importResult);
+		closeModal();
+	}
+
+	/**
+	 * Close the modal
+	 */
+	function closeModal() {
+		showImportModal = false;
+		importResult = null;
+		importFileName = '';
+		importError = '';
+	}
+
+	/**
+	 * Trigger file input click
+	 */
+	function triggerFileInput() {
+		fileInput?.click();
+	}
+
+	/**
+	 * Remove a set
+	 */
+	function removeSet(setId: string) {
+		if (confirm('Remove this custom cell set?')) {
+			setsStore.removeSet(setId);
+		}
+	}
+</script>
+
+<MapControl {position} title="Custom Cells" icon="plus-circle" controlWidth="300px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+			title="Import CSV"
+			onclick={triggerFileInput}
+		>
+			<i class="bi bi-upload"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-cell-manager">
+		<!-- Hidden file input -->
+		<input
+			type="file"
+			accept=".csv"
+			class="d-none"
+			bind:this={fileInput}
+			onchange={handleFileSelect}
+		/>
+
+		<!-- Error message -->
+		{#if importError}
+			<div class="alert alert-danger py-1 px-2 mb-2 small">
+				<i class="bi bi-exclamation-triangle me-1"></i>
+				{importError}
+			</div>
+		{/if}
+
+		<!-- Empty state -->
+		{#if setsStore.sets.length === 0}
+			<div class="text-center p-3">
+				<i class="bi bi-layers fs-1 text-muted"></i>
+				<p class="text-muted small mt-2 mb-0">
+					No custom cell sets loaded.
+				</p>
+				<button 
+					class="btn btn-sm btn-outline-primary mt-2"
+					onclick={triggerFileInput}
+				>
+					<i class="bi bi-upload me-1"></i> Import CSV
+				</button>
+			</div>
+		{:else}
+			<!-- List of sets -->
+			<ul class="list-group list-group-flush">
+				{#each setsStore.sets as set (set.id)}
+					<li class="list-group-item d-flex justify-content-between align-items-center py-2 px-2">
+						<div class="d-flex align-items-center">
+							<button
+								class="btn btn-sm p-0 me-2"
+								title={set.visible ? 'Hide' : 'Show'}
+								onclick={() => setsStore.toggleSetVisibility(set.id)}
+							>
+								<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
+							</button>
+							<div>
+								<div class="fw-medium small">{set.name}</div>
+								<small class="text-muted">
+									{set.cells.length} cells · {set.groups.length} groups
+								</small>
+							</div>
+						</div>
+						<button
+							class="btn btn-sm btn-outline-danger border-0 p-1"
+							title="Remove"
+							onclick={() => removeSet(set.id)}
+						>
+							<i class="bi bi-trash"></i>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</MapControl>
+
+<!-- Import Result Modal -->
+{#if showImportModal && importResult}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-file-earmark-spreadsheet me-2"></i>
+						Import: {importFileName}
+					</h6>
+					<button type="button" class="btn-close" onclick={closeModal}></button>
+				</div>
+				<div class="modal-body">
+					<!-- Import Summary -->
+					<div class="mb-3">
+						<div class="d-flex justify-content-between align-items-center mb-2">
+							<span class="text-success">
+								<i class="bi bi-check-circle me-1"></i>
+								{importResult.cells.length} cells matched
+							</span>
+							<span class="badge bg-success">{importResult.totalRows} rows</span>
+						</div>
+
+						{#if importResult.unmatchedTxIds.length > 0}
+							<div class="text-warning small mb-2">
+								<i class="bi bi-exclamation-triangle me-1"></i>
+								{importResult.unmatchedTxIds.length} cells not found
+								<button 
+									class="btn btn-link btn-sm p-0 ms-1"
+									type="button"
+									data-bs-toggle="collapse"
+									data-bs-target="#unmatchedList"
+								>
+									(show)
+								</button>
+							</div>
+							<div class="collapse" id="unmatchedList">
+								<div class="small bg-light p-2 rounded" style="max-height: 100px; overflow-y: auto;">
+									{importResult.unmatchedTxIds.slice(0, 20).join(', ')}
+									{#if importResult.unmatchedTxIds.length > 20}
+										<span class="text-muted">... and {importResult.unmatchedTxIds.length - 20} more</span>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Groups found -->
+					<div class="mb-3">
+						<label class="form-label small fw-medium">Groups Found ({importResult.groups.length})</label>
+						<div class="d-flex flex-wrap gap-1">
+							{#each importResult.groups as group}
+								<span class="badge bg-secondary">{group}</span>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Extra columns -->
+					{#if importResult.extraColumns.length > 0}
+						<div class="mb-3">
+							<label class="form-label small fw-medium">Extra Columns (for tooltips)</label>
+							<div class="d-flex flex-wrap gap-1">
+								{#each importResult.extraColumns as col}
+									<span class="badge bg-info">{col}</span>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Set Name -->
+					<div class="mb-2">
+						<label for="setName" class="form-label small fw-medium">Set Name</label>
+						<input 
+							type="text" 
+							class="form-control form-control-sm" 
+							id="setName"
+							bind:value={importFileName}
+						/>
+					</div>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={closeModal}>
+						Cancel
+					</button>
+					<button 
+						type="button" 
+						class="btn btn-primary btn-sm"
+						onclick={confirmImport}
+						disabled={importResult.cells.length === 0}
+					>
+						<i class="bi bi-check-lg me-1"></i>
+						Import {importResult.cells.length} cells
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.custom-cell-manager {
+		font-size: 0.875rem;
+	}
+
+	.list-group-item {
+		background: transparent;
+	}
+
+	.modal {
+		z-index: 2000;
+	}
+</style>
+
+<!-- Filter Controls for each set (rendered outside the manager control) -->
+{#each setsArray as set (set.id)}
+	{#key set.id}
+		<CustomCellFilterControl
+			{position}
+			{setsStore}
+			{set}
+			onremove={(id) => setsStore.removeSet(id)}
+		/>
+	{/key}
+{/each}

package/dist/map-v3/features/cells/custom/components/CustomCellSetManager.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const CustomCellSetManager: import("svelte").Component<Props, {}, "">;
+type CustomCellSetManager = ReturnType<typeof CustomCellSetManager>;
+export default CustomCellSetManager;

package/dist/map-v3/features/cells/custom/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Components - Barrel Export
+ */
+export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
+export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';

package/dist/map-v3/features/cells/custom/components/index.js

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Components - Barrel Export
+ */
+export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
+export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';

package/dist/map-v3/features/cells/custom/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Custom Cells Feature - Main Barrel Export
+ *
+ * Ad-hoc cell layers loaded from CSV files.
+ * Reference existing cells by txId with custom grouping and sizing.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     CustomCellsLayer,
+ *     CustomCellSetManager,
+ *     CustomCellFilterControl,
+ *     createCustomCellSetsStore
+ *   } from './';
+ *
+ *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
+ * </script>
+ *
+ * <CustomCellSetManager setsStore={customSetsStore} position="top-left" />
+ * <CustomCellsLayer setsStore={customSetsStore} />
+ * {#each customSetsStore.sets as set (set.id)}
+ *   <CustomCellFilterControl setsStore={customSetsStore} {set} position="top-left" />
+ * {/each}
+ * ```
+ */
+export type { CustomCell, CustomCellSet, CustomCellSetConfig, CustomCellImportResult } from './types';
+export { CUSTOM_CELL_PALETTE } from './types';
+export { CustomCellSetsStore, createCustomCellSetsStore } from './stores';
+export { CustomCellFilterControl, CustomCellSetManager } from './components';
+export { CustomCellsLayer } from './layers';
+export { parseCustomCellsCsv, buildCellLookup, buildCustomCellTree, getGroupCounts } from './logic';