@smartnet360/svelte-components 0.0.85 → 0.0.87

package/dist/map-v3/features/cells/layers/CellsLayer.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.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 { groupCells, getColorForGroup } from '../logic/grouping';
+	import { generateCellArc, calculateRadiusInMeters } from '../logic/geometry';
+	import { Z_INDEX_BY_BAND } from '../constants';
+	import type { TechnologyBandKey } from '../types';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: CellDataStore;
+		registry: CellRegistry;
+		displayStore: CellDisplayStore;
+	}
+
+	let { dataStore, registry, displayStore }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'cells-source';
+	let layerId = 'cells-layer';
+	let lineLayerId = 'cells-line-layer';
+
+	// Debounce timer
+	let updateTimeout: any;
+
+	// Update paint properties when display settings change
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		if (map.getLayer(layerId)) {
+			map.setPaintProperty(layerId, 'fill-opacity', displayStore.fillOpacity);
+		}
+		if (map.getLayer(lineLayerId)) {
+			map.setPaintProperty(lineLayerId, 'line-width', displayStore.lineWidth);
+		}
+	});
+
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const addLayers = () => {
+			if (!map.getSource(sourceId)) {
+				map.addSource(sourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+			}
+
+			if (!map.getLayer(layerId)) {
+				// Fill Layer
+				map.addLayer({
+					id: layerId,
+					type: 'fill',
+					source: sourceId,
+					paint: {
+						'fill-color': ['get', 'color'],
+						'fill-opacity': displayStore.fillOpacity
+					},
+					layout: {
+						'fill-sort-key': ['get', 'zIndex']
+					}
+				});
+			}
+
+			if (!map.getLayer(lineLayerId)) {
+				// Line Layer (Border)
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: sourceId,
+					paint: {
+						'line-color': '#000',
+						'line-width': displayStore.lineWidth,
+						'line-opacity': 0.3
+					}
+				});
+			}
+			
+			// Force update to populate data
+			updateLayer();
+		};
+
+
+		// Initial setup
+		addLayers();
+
+		// Events for updating
+		map.on('style.load', addLayers);
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
+
+		// Cleanup
+		return () => {
+			map.off('style.load', addLayers);
+			map.off('moveend', updateLayer);
+			map.off('zoomend', updateLayer);
+
+			if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+		};
+	});
+
+	// React to data changes or display setting changes
+	$effect(() => {
+		// Explicitly read dependencies to ensure reactivity
+		// Note: We must read them before the short-circuit check or passing to function
+		const _cells = dataStore.filteredCells;
+		const _pixelSize = displayStore.targetPixelSize;
+		const _registryVersion = registry.version;
+		const _l1 = displayStore.level1;
+		const _l2 = displayStore.level2;
+		
+		updateLayer();
+	});
+
+	function updateLayer() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			renderCells(map);
+		}, 100); // Debounce 100ms
+	}
+
+	function renderCells(map: mapboxgl.Map) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		const zoom = map.getZoom();
+		const centerLat = map.getCenter().lat;
+		
+		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
+
+		// 1. Calculate Radius for this zoom
+		const radiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
+		console.log(`[CellsLayer] Radius: ${radiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
+
+		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
+		// In real app, this comes from a store
+		const groups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
+		console.log(`[CellsLayer] Groups: ${groups.size}`);
+		
+		const features: GeoJSON.Feature[] = [];
+		let groupIndex = 0;
+
+		// 3. Iterate groups and generate features
+		for (const [groupId, cells] of groups) {
+			// Get style from registry
+			const defaultColor = getColorForGroup(groupIndex++);
+			const style = registry.getStyle(groupId, defaultColor);
+
+			if (!style.visible) continue;
+
+			for (const cell of cells) {
+				// 4. BBox Filter (Simple point check)
+				if (bounds.contains([cell.longitude, cell.latitude])) {
+					// 5. Z-Index Lookup
+					const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey; // Approx key
+					const zIndex = Z_INDEX_BY_BAND[zIndexKey] || 10;
+
+					// 6. Calculate Scaled Radius based on Z-Index
+					// Higher Z-index (Top layer) = Smaller radius
+					// Lower Z-index (Bottom layer) = Larger radius
+					// This ensures stacked cells are visible
+					const MAX_Z = 15;
+					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% size diff per layer
+					const effectiveRadius = radiusMeters * scaleFactor;
+
+					// 7. Generate Arc
+					const feature = generateCellArc(cell, effectiveRadius, zIndex, style.color);
+					features.push(feature);
+				}
+			}
+		}
+
+		console.log(`[CellsLayer] Generated ${features.length} features in view`);
+
+		// 8. Update Source
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData({
+				type: 'FeatureCollection',
+				features: features as any
+			});
+		}
+	}
+</script>

package/dist/map-v3/features/cells/layers/CellsLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+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;
+}
+declare const CellsLayer: import("svelte").Component<Props, {}, "">;
+type CellsLayer = ReturnType<typeof CellsLayer>;
+export default CellsLayer;

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

@@ -0,0 +1,2 @@
+export { default as CellsLayer } from './CellsLayer.svelte';
+export { default as CellLabelsLayer } from './CellLabelsLayer.svelte';

package/dist/map-v3/features/cells/layers/index.js

@@ -0,0 +1,2 @@
+export { default as CellsLayer } from './CellsLayer.svelte';
+export { default as CellLabelsLayer } from './CellLabelsLayer.svelte';

package/dist/map-v3/features/cells/logic/geometry.d.ts

@@ -0,0 +1,12 @@
+import type { Cell } from '../types';
+/**
+ * Calculates the radius in meters required to achieve a target pixel size
+ * at a specific latitude and zoom level.
+ *
+ * Formula: meters_per_pixel = 156543.03392 * cos(lat * PI / 180) / 2^zoom
+ */
+export declare function calculateRadiusInMeters(latitude: number, zoom: number, targetPixelSize: number): number;
+/**
+ * Generates a sector arc GeoJSON feature for a cell
+ */
+export declare function generateCellArc(cell: Cell, radiusMeters: number, zIndex: number, color: string): GeoJSON.Feature<GeoJSON.Polygon>;

package/dist/map-v3/features/cells/logic/geometry.js

@@ -0,0 +1,35 @@
+import * as turf from '@turf/turf';
+/**
+ * Calculates the radius in meters required to achieve a target pixel size
+ * at a specific latitude and zoom level.
+ *
+ * Formula: meters_per_pixel = 156543.03392 * cos(lat * PI / 180) / 2^zoom
+ */
+export function calculateRadiusInMeters(latitude, zoom, targetPixelSize) {
+    const metersPerPixel = (156543.03392 * Math.cos((latitude * Math.PI) / 180)) / Math.pow(2, zoom);
+    return targetPixelSize * metersPerPixel;
+}
+/**
+ * Generates a sector arc GeoJSON feature for a cell
+ */
+export function generateCellArc(cell, radiusMeters, zIndex, color) {
+    const center = [cell.longitude, cell.latitude];
+    const bearing1 = cell.azimuth - (cell.beamwidth / 2);
+    const bearing2 = cell.azimuth + (cell.beamwidth / 2);
+    // Use Turf to generate the sector
+    // Note: turf.sector takes (center, radius, bearing1, bearing2)
+    // Radius must be in kilometers for default turf units, or specify units
+    const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
+        steps: 10 // Low steps for performance, increase if jagged
+    });
+    // Attach properties for styling and interaction
+    sector.properties = {
+        id: cell.id,
+        cellName: cell.cellName,
+        tech: cell.tech,
+        fband: cell.fband,
+        zIndex: zIndex,
+        color: color
+    };
+    return sector;
+}

package/dist/map-v3/features/cells/logic/grouping.d.ts

@@ -0,0 +1,18 @@
+import type { Cell, CellGroupingField } from '../types';
+export interface TreeData {
+    nodes: Map<string, any>;
+    rootPaths: string[];
+}
+/**
+ * Generates a stable ID for a leaf node based on grouping values
+ */
+export declare function generateLeafId(level1: string, level2: string): string;
+/**
+ * Gets a color from the palette based on index or hash
+ */
+export declare function getColorForGroup(index: number): string;
+/**
+ * Groups cells into a tree structure
+ * This is a simplified version for the initial implementation
+ */
+export declare function groupCells(cells: Cell[], level1Field: CellGroupingField, level2Field: CellGroupingField): Map<string, Cell[]>;

package/dist/map-v3/features/cells/logic/grouping.js

@@ -0,0 +1,30 @@
+import { DEFAULT_PALETTE } from '../constants';
+/**
+ * Generates a stable ID for a leaf node based on grouping values
+ */
+export function generateLeafId(level1, level2) {
+    return `${level1}__${level2}`;
+}
+/**
+ * Gets a color from the palette based on index or hash
+ */
+export function getColorForGroup(index) {
+    return DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+}
+/**
+ * Groups cells into a tree structure
+ * This is a simplified version for the initial implementation
+ */
+export function groupCells(cells, level1Field, level2Field) {
+    const groups = new Map();
+    for (const cell of cells) {
+        const l1 = cell[level1Field] || 'Unknown';
+        const l2 = cell[level2Field] || 'Unknown';
+        const key = generateLeafId(String(l1), String(l2));
+        if (!groups.has(key)) {
+            groups.set(key, []);
+        }
+        groups.get(key)?.push(cell);
+    }
+    return groups;
+}

package/dist/map-v3/features/cells/logic/tree-adapter.d.ts

@@ -0,0 +1,11 @@
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
+import type { Cell, CellGroupingField } from '../types';
+import type { CellRegistry } from '../stores/cell.registry.svelte';
+/**
+ * Converts a list of cells into a Tree structure for the TreeView component
+ */
+export declare function buildCellTree(cells: Cell[], registry: CellRegistry, level1?: CellGroupingField, level2?: CellGroupingField): TreeNode<{
+    color: string;
+    count: number;
+    groupId: string;
+}>[];

package/dist/map-v3/features/cells/logic/tree-adapter.js

@@ -0,0 +1,53 @@
+import { groupCells, generateLeafId, getColorForGroup } from './grouping';
+/**
+ * Converts a list of cells into a Tree structure for the TreeView component
+ */
+export function buildCellTree(cells, registry, level1 = 'tech', level2 = 'fband') {
+    // 1. Group by Level 1 -> Level 2
+    const groups = groupCells(cells, level1, level2);
+    // 2. Build Tree Nodes
+    const level1Nodes = new Map();
+    let groupIndex = 0;
+    for (const [groupId, groupCells] of groups) {
+        if (groupCells.length === 0)
+            continue;
+        const sample = groupCells[0];
+        const l1Value = String(sample[level1] || 'Unknown');
+        const l2Value = String(sample[level2] || 'Unknown');
+        // Ensure Level 1 Node (Root)
+        if (!level1Nodes.has(l1Value)) {
+            level1Nodes.set(l1Value, {
+                id: l1Value,
+                label: l1Value,
+                children: [],
+                defaultExpanded: true,
+            });
+        }
+        // Get style from registry (or default)
+        const defaultColor = getColorForGroup(groupIndex++);
+        const style = registry.getStyle(groupId, defaultColor);
+        // Create Level 2 Node (Leaf)
+        const leafNode = {
+            id: groupId,
+            label: `${l2Value} (${groupCells.length})`,
+            metadata: {
+                color: style.color,
+                count: groupCells.length,
+                groupId: groupId
+            },
+            defaultChecked: style.visible,
+        };
+        level1Nodes.get(l1Value)?.children?.push(leafNode);
+    }
+    // 3. Sort Level 1 Nodes
+    const sortedNodes = Array.from(level1Nodes.values()).sort((a, b) => a.label.localeCompare(b.label));
+    // 4. Wrap in Root Node
+    const rootNode = {
+        id: 'root-cells',
+        label: `Cells (${cells.length})`,
+        children: sortedNodes,
+        defaultExpanded: true,
+        defaultChecked: true,
+    };
+    return [rootNode];
+}

package/dist/map-v3/features/cells/stores/cell.data.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Cell } from '../types';
+export declare class CellDataStore {
+    rawCells: Cell[];
+    filterOnAir: boolean;
+    constructor();
+    setCells(cells: Cell[]): void;
+    get filteredCells(): Cell[];
+}
+export declare function createCellDataStore(): CellDataStore;

package/dist/map-v3/features/cells/stores/cell.data.svelte.js

@@ -0,0 +1,16 @@
+export class CellDataStore {
+    rawCells = $state([]);
+    filterOnAir = $state(false);
+    constructor() { }
+    setCells(cells) {
+        this.rawCells = cells;
+    }
+    get filteredCells() {
+        if (!this.filterOnAir)
+            return this.rawCells;
+        return this.rawCells.filter(c => c.status === 'On_Air');
+    }
+}
+export function createCellDataStore() {
+    return new CellDataStore();
+}

package/dist/map-v3/features/cells/stores/cell.display.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CellGroupingField } from '../types';
+export declare class CellDisplayStore {
+    key: string;
+    targetPixelSize: number;
+    fillOpacity: number;
+    lineWidth: number;
+    showLabels: boolean;
+    level1: CellGroupingField;
+    level2: CellGroupingField;
+    labelPixelDistance: number;
+    labelFontSize: number;
+    labelAzimuthTolerance: number;
+    labelColor: string;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    labels2G: {
+        primary: string;
+        secondary: string;
+    };
+    labels4G: {
+        primary: string;
+        secondary: string;
+    };
+    constructor();
+}

package/dist/map-v3/features/cells/stores/cell.display.svelte.js

@@ -0,0 +1,67 @@
+import { browser } from '$app/environment';
+export class CellDisplayStore {
+    key = 'map-v3-cell-display';
+    // State
+    targetPixelSize = $state(50);
+    fillOpacity = $state(0.6);
+    lineWidth = $state(1);
+    showLabels = $state(false);
+    // Grouping
+    level1 = $state('tech');
+    level2 = $state('fband');
+    // Label Settings
+    labelPixelDistance = $state(60);
+    labelFontSize = $state(12);
+    labelAzimuthTolerance = $state(10);
+    labelColor = $state('#333333');
+    labelHaloColor = $state('#ffffff');
+    labelHaloWidth = $state(1);
+    // Tech-specific label config
+    labels2G = $state({ primary: 'cellID', secondary: 'none' });
+    labels4G = $state({ primary: 'cellID', secondary: 'dlEarfn' });
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    this.targetPixelSize = parsed.targetPixelSize ?? 50;
+                    this.fillOpacity = parsed.fillOpacity ?? 0.6;
+                    this.lineWidth = parsed.lineWidth ?? 1;
+                    this.showLabels = parsed.showLabels ?? false;
+                    this.level1 = parsed.level1 ?? 'tech';
+                    this.level2 = parsed.level2 ?? 'fband';
+                    this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
+                    this.labelFontSize = parsed.labelFontSize ?? 12;
+                    this.labelAzimuthTolerance = parsed.labelAzimuthTolerance ?? 10;
+                    this.labelColor = parsed.labelColor ?? '#333333';
+                    this.labelHaloColor = parsed.labelHaloColor ?? '#ffffff';
+                    this.labelHaloWidth = parsed.labelHaloWidth ?? 1;
+                    this.labels2G = parsed.labels2G ?? { primary: 'cellID', secondary: 'none' };
+                    this.labels4G = parsed.labels4G ?? { primary: 'cellID', secondary: 'dlEarfn' };
+                }
+                catch (e) {
+                    console.error('Failed to load cell display settings', e);
+                }
+            }
+            $effect(() => {
+                localStorage.setItem(this.key, JSON.stringify({
+                    targetPixelSize: this.targetPixelSize,
+                    fillOpacity: this.fillOpacity,
+                    lineWidth: this.lineWidth,
+                    showLabels: this.showLabels,
+                    level1: this.level1,
+                    level2: this.level2,
+                    labelPixelDistance: this.labelPixelDistance,
+                    labelFontSize: this.labelFontSize,
+                    labelAzimuthTolerance: this.labelAzimuthTolerance,
+                    labelColor: this.labelColor,
+                    labelHaloColor: this.labelHaloColor,
+                    labelHaloWidth: this.labelHaloWidth,
+                    labels2G: this.labels2G,
+                    labels4G: this.labels4G
+                }));
+            });
+        }
+    }
+}

package/dist/map-v3/features/cells/stores/cell.registry.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Persistent store for cell styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export declare class CellRegistry {
+    state: Record<string, {
+        color: string;
+        visible: boolean;
+    }>;
+    version: number;
+    namespace: string;
+    constructor(namespace?: string);
+    load(): void;
+    save(): void;
+    getStyle(id: string, defaultColor: string): {
+        color: string;
+        visible: boolean;
+    };
+    toggleVisibility(id: string): void;
+    setColor(id: string, color: string): void;
+}
+export declare function createCellRegistry(namespace: string): CellRegistry;

package/dist/map-v3/features/cells/stores/cell.registry.svelte.js

@@ -0,0 +1,68 @@
+import { writable } from 'svelte/store';
+/**
+ * Persistent store for cell styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export class CellRegistry {
+    state = $state({});
+    version = $state(0); // Signal for reactivity
+    namespace;
+    constructor(namespace = 'default') {
+        this.namespace = namespace;
+        this.load();
+        $effect(() => {
+            this.save();
+        });
+    }
+    load() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const stored = localStorage.getItem(`${this.namespace}:cell-registry`);
+            if (stored) {
+                this.state = JSON.parse(stored);
+                this.version++;
+            }
+        }
+        catch (e) {
+            console.warn('Failed to load cell registry', e);
+        }
+    }
+    save() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(`${this.namespace}:cell-registry`, JSON.stringify(this.state));
+        }
+        catch (e) {
+            console.warn('Failed to save cell registry', e);
+        }
+    }
+    getStyle(id, defaultColor) {
+        if (!this.state[id]) {
+            // Initialize if missing
+            this.state[id] = { color: defaultColor, visible: true };
+            // No version bump here to avoid loops during render
+        }
+        return this.state[id];
+    }
+    toggleVisibility(id) {
+        if (this.state[id]) {
+            this.state[id].visible = !this.state[id].visible;
+            this.version++;
+        }
+        else {
+            console.warn(`[CellRegistry] Tried to toggle missing ID: ${id}`);
+        }
+    }
+    setColor(id, color) {
+        if (this.state[id]) {
+            this.state[id].color = color;
+            this.version++;
+        }
+    }
+}
+export function createCellRegistry(namespace) {
+    return new CellRegistry(namespace);
+}

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

@@ -0,0 +1,62 @@
+/**
+ * Cell Feature - Type Definitions
+ *
+ * Core interfaces and types for cellular network visualization
+ */
+/**
+ * Cell data model - represents a radio cell/sector
+ */
+export interface Cell {
+    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, any>;
+    customSubgroup: string;
+}
+/**
+ * Supported cell sector status values
+ */
+export type CellStatus = 'On_Air' | 'On_Air_UNDER_CONSTRUCTION' | 'On_Air_Locked' | 'RF_Plan_Ready' | 'Re-Planned_RF_Plan_Ready' | 'Tavlati_RF_Plan_Ready';
+/**
+ * Technology-Band combination key
+ */
+export type TechnologyBandKey = string;
+/**
+ * Grouping fields for Tree View
+ */
+export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';

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

@@ -0,0 +1,6 @@
+/**
+ * Cell Feature - Type Definitions
+ *
+ * Core interfaces and types for cellular network visualization
+ */
+export {};