@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/features/cells/components/CellFilterControl.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import { MapControl } from '../../../shared';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import type { CellDataStore } from '../stores/cell.data.svelte';
+	import type { CellRegistry } from '../stores/cell.registry.svelte';
+	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+	import type { CellGroupingField } from '../types';
+	import { buildCellTree } from '../logic/tree-adapter';
+
+	interface Props {
+		dataStore: CellDataStore;
+		registry: CellRegistry;
+		displayStore: CellDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { dataStore, registry, displayStore, position = 'top-left' }: Props = $props();
+
+	// Local State for Grouping
+	// let level1 = $state<CellGroupingField>('tech');
+	// let level2 = $state<CellGroupingField>('fband');
+	let includePlanned = $state(false);
+
+	const level1Options: CellGroupingField[] = ['tech', 'status', 'siteId'];
+	const level2Options: CellGroupingField[] = ['fband', 'frq', 'status', 'none'];
+
+	// Sync includePlanned with dataStore
+	$effect(() => {
+		// If includePlanned is true, we show ALL (filterOnAir = false)
+		// If includePlanned is false, we show ONLY On Air (filterOnAir = true)
+		dataStore.filterOnAir = !includePlanned;
+	});
+
+	// Create Tree Store
+	// We recreate it whenever the cell data changes significantly (e.g. new file loaded)
+	// or when grouping configuration changes.
+	// We use untrack() to avoid recreating the tree when the registry changes (visibility toggles),
+	// as the tree itself drives those changes.
+	let treeStore = $derived.by(() => {
+		const _cells = dataStore.filteredCells;
+		const _l1 = displayStore.level1;
+		const _l2 = displayStore.level2;
+
+		return untrack(() => {
+			const nodes = buildCellTree(_cells, registry, _l1, _l2);
+			return createTreeStore({
+				nodes,
+				namespace: `${registry.namespace}:tree:${_l1}:${_l2}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	// Sync Tree Selection -> Cell Registry Visibility
+	$effect(() => {
+		const unsubscribe = treeStore.subscribe((val) => {
+			// Iterate all leaf nodes to sync visibility
+			// This is a bit heavy but ensures consistency. 
+			// Optimization: Only update changed nodes if we had a diff.
+			
+			// We only care about leaf nodes (bands)
+			let changes = 0;
+			val.state.nodes.forEach((nodeState) => {
+				if (nodeState.node.children && nodeState.node.children.length > 0) return; // Skip folders
+
+				const groupId = nodeState.node.id;
+				// IMPORTANT: Read from checkedPaths set, NOT nodeState.checked (which is static/stale)
+				const isVisible = val.state.checkedPaths.has(nodeState.path);
+				
+				// Update registry if different
+				const currentStyle = registry.getStyle(groupId, '#000'); // Color doesn't matter here
+				if (currentStyle.visible !== isVisible) {
+					// console.log(`[CellFilterControl] Syncing ${groupId}: ${currentStyle.visible} -> ${isVisible}`);
+					registry.toggleVisibility(groupId);
+					changes++;
+				}
+			});
+			if (changes > 0) {
+				console.log(`[CellFilterControl] Synced ${changes} visibility changes to registry`);
+			}
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		registry.setColor(groupId, input.value);
+	}
+
+	function getFieldLabel(field: string): string {
+		const labels: Record<string, string> = {
+			tech: 'Technology',
+			fband: 'Tech + Band',
+			frq: 'Frequency',
+			status: 'Status',
+			siteId: 'Site ID',
+			none: 'None'
+		};
+		return labels[field] || field;
+	}
+</script>
+
+<MapControl {position} title="Layers" icon="radioactive" controlWidth="320px">
+	<div class="cell-filter-control">
+		<!-- Status Filter Checkbox -->
+		<div class="mb-3 px-1">
+			<div class="form-check">
+				<input 
+					type="checkbox" 
+					class="form-check-input" 
+					id="includePlanned"
+					bind:checked={includePlanned}
+				/>
+				<label class="form-check-label small" for="includePlanned">
+					Include Planned Cells
+					<span class="text-muted ms-1">
+						({includePlanned ? 'All cells' : 'On Air only'})
+					</span>
+				</label>
+			</div>
+		</div>
+
+		<!-- Grouping Configuration -->
+		<div class="grouping-config mb-3 pb-2 border-bottom">
+			<div class="row g-2">
+				<!-- Level 1 Grouping -->
+				<div class="col-6">
+					<label for="level1-select" class="form-label small mb-1 text-muted">Level 1</label>
+					<select 
+						id="level1-select"
+						class="form-select form-select-sm"
+						bind:value={displayStore.level1}
+					>
+						{#each level1Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
+						{/each}
+					</select>
+				</div>
+				
+				<!-- Level 2 Grouping -->
+				<div class="col-6">
+					<label for="level2-select" class="form-label small mb-1 text-muted">Level 2</label>
+					<select 
+						id="level2-select"
+						class="form-select form-select-sm"
+						bind:value={displayStore.level2}
+					>
+						{#each level2Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<!-- Tree View -->
+		<div class="cell-filter-tree">
+			{#if dataStore.filteredCells.length === 0}
+				<div class="text-muted p-3 text-center small">
+					No cells loaded.
+				</div>
+			{:else}
+				<TreeView showControls={false} store={$treeStore} height="300px">
+					{#snippet children({ node, state })}
+						<!-- Color Picker (Only for leaves) -->
+						{#if !node.children || node.children.length === 0}
+							<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.id, e)}
+									title="Change color"
+								/>
+							</div>
+						{/if}
+					{/snippet}
+				</TreeView>
+			{/if}
+		</div>
+
+		<!-- Stats Footer -->
+		<!-- <div class="cell-filter-stats text-center pt-2 mt-2 border-top">
+			<small class="text-muted">
+				Showing {dataStore.filteredCells.length} of {dataStore.rawCells.length} cells
+			</small>
+		</div> -->
+	</div>
+</MapControl>
+
+<style>
+	.cell-filter-control {
+		background: #fff;
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { CellDataStore } from '../stores/cell.data.svelte';
+import type { CellRegistry } from '../stores/cell.registry.svelte';
+import type { CellDisplayStore } from '../stores/cell.display.svelte';
+interface Props {
+    dataStore: CellDataStore;
+    registry: CellRegistry;
+    displayStore: CellDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const CellFilterControl: import("svelte").Component<Props, {}, "">;
+type CellFilterControl = ReturnType<typeof CellFilterControl>;
+export default CellFilterControl;

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+
+	interface Props {
+		displayStore: CellDisplayStore;
+	}
+
+	let { displayStore }: Props = $props();
+</script>
+
+<div class="card border-0 shadow-sm rounded-2">
+	<div class="card-body bg-light p-3">
+		<!-- Target Pixel Size (Radius) -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Pixel Size</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.targetPixelSize}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-radius-slider"
+					type="range"
+					class="form-range w-100"
+					min="10"
+					max="200"
+					step="5"
+					bind:value={displayStore.targetPixelSize}
+				/>
+			</div>
+		</div>
+
+		<!-- Line Width -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Line Width</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.lineWidth}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-line-width-slider"
+					type="range"
+					class="form-range w-100"
+					min="0.5"
+					max="5"
+					step="0.5"
+					bind:value={displayStore.lineWidth}
+				/>
+			</div>
+		</div>
+
+		<!-- Fill Opacity -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill Opacity</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{Math.round(displayStore.fillOpacity * 100)}%</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-opacity-slider"
+					type="range"
+					class="form-range w-100"
+					min="0"
+					max="1"
+					step="0.1"
+					bind:value={displayStore.fillOpacity}
+				/>
+			</div>
+		</div>
+
+		<div class="border-top my-3"></div>
+
+		<!-- Show Labels -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Labels</div>
+			<div class="col-3"></div>
+			<div class="col-5">
+				<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+					<input
+						id="cell-labels-toggle"
+						type="checkbox"
+						class="form-check-input"
+						role="switch"
+						bind:checked={displayStore.showLabels}
+					/>
+				</div>
+			</div>
+		</div>
+
+		{#if displayStore.showLabels}
+			<div class="ps-3 border-start border-2 mb-3">
+				<!-- 2G Labels -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">2G Labels</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels2G.primary}>
+								<option value="cellName">Name</option>
+								<option value="cellID">Cell ID</option>
+								<option value="bcch">BCCH</option>
+								<option value="siteId">Site ID</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels2G.secondary}>
+								<option value="none">None</option>
+								<option value="bcch">BCCH</option>
+								<option value="cellID">Cell ID</option>
+								<option value="siteId">Site ID</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<!-- 4G/5G Labels -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">4G/5G Labels</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels4G.primary}>
+								<option value="cellName">Name</option>
+								<option value="pci1">PCI</option>
+								<option value="dlEarfn">EARFCN</option>
+								<option value="cellID">Cell ID</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels4G.secondary}>
+								<option value="none">None</option>
+								<option value="pci1">PCI</option>
+								<option value="dlEarfn">EARFCN</option>
+								<option value="cellID">Cell ID</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<!-- Label Distance -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Distance</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelPixelDistance}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="10"
+							max="100"
+							step="5"
+							bind:value={displayStore.labelPixelDistance}
+						/>
+					</div>
+				</div>
+
+				<!-- Font Size -->
+				<div class="row align-items-center g-2 mb-3">
+					<div class="col-4 text-secondary small">Font Size</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelFontSize}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="8"
+							max="24"
+							step="1"
+							bind:value={displayStore.labelFontSize}
+						/>
+					</div>
+				</div>
+
+				<!-- Label Colors -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Color</div>
+					<div class="col-8">
+						<div class="input-group input-group-sm">
+							<input
+								type="color"
+								class="form-control form-control-color"
+								bind:value={displayStore.labelColor}
+								title="Label Color"
+							/>
+							<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+								{displayStore.labelColor}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Halo Settings -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Halo</div>
+					<div class="col-8">
+						<div class="input-group input-group-sm">
+							<input
+								type="color"
+								class="form-control form-control-color"
+								bind:value={displayStore.labelHaloColor}
+								title="Halo Color"
+							/>
+							<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+								{displayStore.labelHaloColor}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="row align-items-center g-2 mb-3">
+					<div class="col-4 text-secondary small">Halo Width</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelHaloWidth}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="0"
+							max="5"
+							step="0.5"
+							bind:value={displayStore.labelHaloWidth}
+						/>
+					</div>
+				</div>
+
+				
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+import type { CellDisplayStore } from '../stores/cell.display.svelte';
+interface Props {
+    displayStore: CellDisplayStore;
+}
+declare const CellSettingsPanel: import("svelte").Component<Props, {}, "">;
+type CellSettingsPanel = ReturnType<typeof CellSettingsPanel>;
+export default CellSettingsPanel;

package/dist/map-v3/features/cells/constants.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+import type { TechnologyBandKey } from './types';
+export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export declare const CELL_FILL_Z_INDEX = 100;
+export declare const CELL_LINE_Z_INDEX = 101;
+/**
+ * Default colors for cyclical palette
+ */
+export declare const DEFAULT_PALETTE: string[];

package/dist/map-v3/features/cells/constants.js

@@ -0,0 +1,37 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+export const Z_INDEX_BY_BAND = {
+    // 2G bands
+    '2G_900': 3,
+    '2G_1800': 7,
+    // 4G bands
+    '4G_700': 0,
+    '4G_800': 2,
+    '4G_900': 4,
+    '4G_1800': 8,
+    '4G_2100': 9,
+    '4G_2600': 11,
+    // 5G bands
+    '5G_700': 1,
+    '5G_2100': 10,
+    '5G_3500': 14
+};
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export const CELL_FILL_Z_INDEX = 100;
+export const CELL_LINE_Z_INDEX = 101;
+/**
+ * Default colors for cyclical palette
+ */
+export const DEFAULT_PALETTE = [
+    '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+    '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe',
+    '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000',
+    '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'
+];