@smartnet360/svelte-components 0.0.57 → 0.0.58

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Cell Store Context - Bindable reactive state for cell feature
+ *
+ * Uses Svelte 5 runes ($state) to create a directly bindable reactive object
+ * Persists visual settings and grouping configuration to localStorage
+ */
+import type { Cell, CellStatus, CellStatusStyle, CellTreeConfig } from '../types';
+export interface CellStoreValue {
+    cells: Cell[];
+    filteredCells: Cell[];
+    showCells: boolean;
+    lineWidth: number;
+    fillOpacity: number;
+    baseRadius: number;
+    statusStyles: Map<CellStatus, CellStatusStyle>;
+    groupingConfig: CellTreeConfig;
+    groupColorMap: Map<string, string>;
+    currentZoom: number;
+}
+export interface CellStoreContext {
+    readonly cells: Cell[];
+    readonly filteredCells: Cell[];
+    readonly showCells: boolean;
+    readonly lineWidth: number;
+    readonly fillOpacity: number;
+    readonly baseRadius: number;
+    readonly currentZoom: number;
+    readonly groupingConfig: CellTreeConfig;
+    readonly groupColorMap: Map<string, string>;
+    setFilteredCells(cells: Cell[]): void;
+    setShowCells(value: boolean): void;
+    setLineWidth(value: number): void;
+    setFillOpacity(value: number): void;
+    setBaseRadius(value: number): void;
+    setCurrentZoom(value: number): void;
+    setGroupingConfig(config: CellTreeConfig): void;
+    getStatusStyle(status: CellStatus): CellStatusStyle;
+    setStatusStyle(status: CellStatus, style: CellStatusStyle): void;
+    getGroupColor(groupKey: string): string | undefined;
+    setGroupColor(groupKey: string, color: string): void;
+    clearGroupColor(groupKey: string): void;
+}
+/**
+ * Create a cell store context with reactive state
+ */
+export declare function createCellStoreContext(cells: Cell[]): CellStoreContext;

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js

@@ -0,0 +1,137 @@
+/**
+ * Cell Store Context - Bindable reactive state for cell feature
+ *
+ * Uses Svelte 5 runes ($state) to create a directly bindable reactive object
+ * Persists visual settings and grouping configuration to localStorage
+ */
+import { DEFAULT_CELL_TREE_CONFIG } from '../types';
+import { DEFAULT_STATUS_STYLES } from '../constants/statusStyles';
+const STORAGE_KEY = 'cellVisualSettings';
+function loadSettings() {
+    if (typeof window === 'undefined')
+        return {};
+    try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            return JSON.parse(saved);
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load cell settings from localStorage:', error);
+    }
+    return {};
+}
+function saveSettings(settings) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    }
+    catch (error) {
+        console.warn('Failed to save cell settings to localStorage:', error);
+    }
+}
+/**
+ * Create a cell store context with reactive state
+ */
+export function createCellStoreContext(cells) {
+    // Load persisted settings
+    const persistedSettings = loadSettings();
+    // Convert persisted groupColors object back to Map
+    const initialColorMap = new Map();
+    if (persistedSettings.groupColors) {
+        Object.entries(persistedSettings.groupColors).forEach(([key, value]) => {
+            initialColorMap.set(key, value);
+        });
+    }
+    // Internal reactive state
+    let state = $state({
+        cells,
+        filteredCells: cells,
+        showCells: persistedSettings.showCells ?? true,
+        lineWidth: persistedSettings.lineWidth ?? 2,
+        fillOpacity: persistedSettings.fillOpacity ?? 0.6,
+        baseRadius: persistedSettings.baseRadius ?? 500,
+        statusStyles: new Map(Object.entries(DEFAULT_STATUS_STYLES)),
+        groupingConfig: persistedSettings.groupingConfig ?? DEFAULT_CELL_TREE_CONFIG,
+        groupColorMap: initialColorMap,
+        currentZoom: 12 // Default zoom
+    });
+    // Auto-save settings when they change
+    $effect(() => {
+        // Convert Map to plain object for serialization
+        const groupColorsObj = {};
+        state.groupColorMap.forEach((color, key) => {
+            groupColorsObj[key] = color;
+        });
+        const settings = {
+            showCells: state.showCells,
+            lineWidth: state.lineWidth,
+            fillOpacity: state.fillOpacity,
+            baseRadius: state.baseRadius,
+            groupingConfig: state.groupingConfig,
+            groupColors: groupColorsObj
+        };
+        saveSettings(settings);
+    });
+    // Return store context
+    return {
+        // Bindable properties with getters/setters
+        get cells() { return state.cells; },
+        set cells(value) { state.cells = value; },
+        get filteredCells() { return state.filteredCells; },
+        set filteredCells(value) { state.filteredCells = value; },
+        get showCells() { return state.showCells; },
+        set showCells(value) { state.showCells = value; },
+        get lineWidth() { return state.lineWidth; },
+        set lineWidth(value) { state.lineWidth = value; },
+        get fillOpacity() { return state.fillOpacity; },
+        set fillOpacity(value) { state.fillOpacity = value; },
+        get baseRadius() { return state.baseRadius; },
+        set baseRadius(value) { state.baseRadius = value; },
+        get currentZoom() { return state.currentZoom; },
+        set currentZoom(value) { state.currentZoom = value; },
+        get groupingConfig() { return state.groupingConfig; },
+        get groupColorMap() { return state.groupColorMap; },
+        // Methods
+        setFilteredCells(cells) {
+            state.filteredCells = cells;
+        },
+        setShowCells(value) {
+            state.showCells = value;
+        },
+        setLineWidth(value) {
+            state.lineWidth = value;
+        },
+        setFillOpacity(value) {
+            state.fillOpacity = value;
+        },
+        setBaseRadius(value) {
+            state.baseRadius = value;
+        },
+        setCurrentZoom(value) {
+            state.currentZoom = value;
+        },
+        setGroupingConfig(config) {
+            state.groupingConfig = config;
+        },
+        getStatusStyle(status) {
+            return state.statusStyles.get(status) || DEFAULT_STATUS_STYLES['On_Air'];
+        },
+        setStatusStyle(status, style) {
+            state.statusStyles.set(status, style);
+        },
+        getGroupColor(groupKey) {
+            return state.groupColorMap.get(groupKey);
+        },
+        setGroupColor(groupKey, color) {
+            state.groupColorMap.set(groupKey, color);
+            // Trigger reactivity by reassigning the map
+            state.groupColorMap = new Map(state.groupColorMap);
+        },
+        clearGroupColor(groupKey) {
+            state.groupColorMap.delete(groupKey);
+            state.groupColorMap = new Map(state.groupColorMap);
+        }
+    };
+}

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

@@ -0,0 +1,99 @@
+/**
+ * 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';
+/**
+ * Status styling configuration for cell sector borders
+ */
+export interface CellStatusStyle {
+    /** Line type (solid, dashed, etc.) */
+    lineType: 'solid' | 'dashed' | 'dotted';
+    /** Line width in pixels */
+    lineWidth: number;
+    /** Line color in hex format */
+    lineColor: string;
+    /** Opacity for the line (0–1) */
+    opacity: number;
+    /** Dash array for creating dashed/dotted lines (e.g., [5, 5] for dashed) */
+    dashArray: number[];
+}
+/**
+ * Technology-Band combination key
+ * Format: '2G_900' | '4G_700' | '5G_3500'
+ */
+export type TechnologyBandKey = '2G_900' | '2G_1800' | '4G_700' | '4G_800' | '4G_900' | '4G_1800' | '4G_2100' | '4G_2600' | '5G_700' | '5G_2100' | '5G_3500';
+/**
+ * Parsed technology and band from fband string
+ */
+export interface ParsedTechBand {
+    tech: string;
+    band: string;
+    key: TechnologyBandKey;
+}
+/**
+ * Available fields for grouping cells in the filter tree
+ */
+export type CellGroupingField = 'tech' | 'band' | 'status' | 'siteId' | 'customSubgroup' | 'type' | 'planner' | 'none';
+/**
+ * Configuration for dynamic tree grouping
+ */
+export interface CellTreeConfig {
+    /** Primary grouping field (required) */
+    level1: Exclude<CellGroupingField, 'none'>;
+    /** Secondary grouping field (optional, can be 'none') */
+    level2: CellGroupingField;
+}
+/**
+ * Default tree configuration
+ */
+export declare const DEFAULT_CELL_TREE_CONFIG: CellTreeConfig;

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

@@ -0,0 +1,12 @@
+/**
+ * Cell Feature - Type Definitions
+ *
+ * Core interfaces and types for cellular network visualization
+ */
+/**
+ * Default tree configuration
+ */
+export const DEFAULT_CELL_TREE_CONFIG = {
+    level1: 'tech',
+    level2: 'band'
+};

package/dist/map-v2/features/cells/utils/arcGeometry.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Arc Geometry Utilities
+ *
+ * Calculate arc polygons for cell sectors using Turf.js
+ */
+import type { Feature, Polygon } from 'geojson';
+/**
+ * Create an arc polygon representing a cell sector
+ *
+ * @param center - Center point [longitude, latitude]
+ * @param azimuth - Direction in degrees (0 = North, clockwise)
+ * @param beamwidth - Coverage angle in degrees (e.g., 65°)
+ * @param radius - Sector radius in meters
+ * @param steps - Number of points in the arc (more = smoother, default 64)
+ * @returns GeoJSON Polygon feature representing the sector arc
+ *
+ * @example
+ * // Create a 65° sector pointing north with 500m radius
+ * const arc = createArcPolygon(
+ *   [-122.4194, 37.7749],  // San Francisco
+ *   0,                      // North
+ *   65,                     // 65° beamwidth
+ *   500,                    // 500 meters
+ *   64                      // 64 points
+ * );
+ */
+export declare function createArcPolygon(center: [number, number], azimuth: number, beamwidth: number, radius: number, steps?: number): Feature<Polygon>;
+/**
+ * Create a simple line from center to edge of sector (for debugging/visualization)
+ *
+ * @param center - Center point [longitude, latitude]
+ * @param azimuth - Direction in degrees
+ * @param radius - Distance in meters
+ * @returns GeoJSON Point at the edge of the sector
+ */
+export declare function getArcEdgePoint(center: [number, number], azimuth: number, radius: number): [number, number];

package/dist/map-v2/features/cells/utils/arcGeometry.js

@@ -0,0 +1,55 @@
+/**
+ * Arc Geometry Utilities
+ *
+ * Calculate arc polygons for cell sectors using Turf.js
+ */
+import * as turf from '@turf/turf';
+/**
+ * Create an arc polygon representing a cell sector
+ *
+ * @param center - Center point [longitude, latitude]
+ * @param azimuth - Direction in degrees (0 = North, clockwise)
+ * @param beamwidth - Coverage angle in degrees (e.g., 65°)
+ * @param radius - Sector radius in meters
+ * @param steps - Number of points in the arc (more = smoother, default 64)
+ * @returns GeoJSON Polygon feature representing the sector arc
+ *
+ * @example
+ * // Create a 65° sector pointing north with 500m radius
+ * const arc = createArcPolygon(
+ *   [-122.4194, 37.7749],  // San Francisco
+ *   0,                      // North
+ *   65,                     // 65° beamwidth
+ *   500,                    // 500 meters
+ *   64                      // 64 points
+ * );
+ */
+export function createArcPolygon(center, azimuth, beamwidth, radius, steps = 64) {
+    // Convert radius from meters to kilometers for Turf
+    const radiusKm = radius / 1000;
+    // Calculate start and end bearings for the arc
+    // Azimuth is the center direction, beamwidth is the total angle
+    const halfBeam = beamwidth / 2;
+    const startBearing = azimuth - halfBeam;
+    const endBearing = azimuth + halfBeam;
+    // Create the sector using Turf.js
+    // sector(center, radius, bearing1, bearing2, options)
+    const sector = turf.sector(center, radiusKm, startBearing, endBearing, {
+        steps: steps,
+        units: 'kilometers'
+    });
+    return sector;
+}
+/**
+ * Create a simple line from center to edge of sector (for debugging/visualization)
+ *
+ * @param center - Center point [longitude, latitude]
+ * @param azimuth - Direction in degrees
+ * @param radius - Distance in meters
+ * @returns GeoJSON Point at the edge of the sector
+ */
+export function getArcEdgePoint(center, azimuth, radius) {
+    const radiusKm = radius / 1000;
+    const point = turf.destination(center, radiusKm, azimuth, { units: 'kilometers' });
+    return point.geometry.coordinates;
+}

package/dist/map-v2/features/cells/utils/cellGeoJSON.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Cell GeoJSON Conversion
+ *
+ * Convert cell data to GeoJSON FeatureCollection with styling properties
+ */
+import type { FeatureCollection, Polygon } from 'geojson';
+import type { Cell } from '../types';
+/**
+ * Convert cells to GeoJSON FeatureCollection with arc geometries and styling properties
+ *
+ * @param cells - Array of cells to convert
+ * @param currentZoom - Current map zoom level for radius calculation
+ * @param baseRadius - Base radius in meters before multipliers
+ * @param groupColorMap - Optional custom colors for cell groups
+ * @returns GeoJSON FeatureCollection with arc polygons
+ */
+export declare function cellsToGeoJSON(cells: Cell[], currentZoom: number, baseRadius?: number, groupColorMap?: Map<string, string>): FeatureCollection<Polygon>;
+/**
+ * Helper function to generate group key from cell based on grouping config
+ * This will be used when implementing dynamic grouping
+ */
+export declare function getCellGroupKey(cell: Cell, level1Field: string, level2Field?: string): string;

package/dist/map-v2/features/cells/utils/cellGeoJSON.js

@@ -0,0 +1,81 @@
+/**
+ * Cell GeoJSON Conversion
+ *
+ * Convert cell data to GeoJSON FeatureCollection with styling properties
+ */
+import { TECHNOLOGY_BAND_COLORS } from '../constants/colors';
+import { DEFAULT_STATUS_STYLES } from '../constants/statusStyles';
+import { calculateRadius } from './zoomScaling';
+import { createArcPolygon } from './arcGeometry';
+/**
+ * Convert cells to GeoJSON FeatureCollection with arc geometries and styling properties
+ *
+ * @param cells - Array of cells to convert
+ * @param currentZoom - Current map zoom level for radius calculation
+ * @param baseRadius - Base radius in meters before multipliers
+ * @param groupColorMap - Optional custom colors for cell groups
+ * @returns GeoJSON FeatureCollection with arc polygons
+ */
+export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorMap) {
+    const features = cells.map((cell) => {
+        // Calculate tech-band key for styling
+        const techBandKey = `${cell.tech}_${cell.frq}`;
+        // Get default tech-band color
+        const defaultColor = TECHNOLOGY_BAND_COLORS[techBandKey] || '#cccccc';
+        // Get custom group color if available
+        // Group key depends on grouping config, for now use tech-band
+        const groupKey = techBandKey;
+        const groupColor = groupColorMap?.get(groupKey);
+        // Get status style
+        const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
+        // Calculate final radius based on zoom and tech-band
+        const radius = calculateRadius(baseRadius, techBandKey, currentZoom);
+        // Create arc polygon geometry
+        const center = [cell.longitude, cell.latitude];
+        const arc = createArcPolygon(center, cell.azimuth, cell.beamwidth, radius);
+        // Build feature with styling properties
+        return {
+            type: 'Feature',
+            geometry: arc.geometry,
+            properties: {
+                // Cell identification
+                id: cell.id,
+                cellID: cell.cellID,
+                cellName: cell.cellName,
+                siteId: cell.siteId,
+                // Cell attributes
+                tech: cell.tech,
+                band: cell.frq,
+                status: cell.status,
+                type: cell.type,
+                azimuth: cell.azimuth,
+                beamwidth: cell.beamwidth,
+                // Styling properties for Mapbox
+                techBandKey,
+                techBandColor: defaultColor, // Default color from constants
+                groupColor: groupColor, // Custom color (if set)
+                // Line (border) styling from status
+                lineColor: statusStyle.lineColor,
+                lineWidth: statusStyle.lineWidth,
+                lineOpacity: statusStyle.opacity,
+                dashArray: statusStyle.dashArray,
+                // Additional metadata for tooltips
+                onAirDate: cell.onAirDate,
+                comment: cell.comment,
+                planner: cell.planner
+            }
+        };
+    });
+    return {
+        type: 'FeatureCollection',
+        features
+    };
+}
+/**
+ * Helper function to generate group key from cell based on grouping config
+ * This will be used when implementing dynamic grouping
+ */
+export function getCellGroupKey(cell, level1Field, level2Field) {
+    // For now, default to tech-band
+    return `${cell.tech}_${cell.frq}`;
+}

package/dist/map-v2/features/cells/utils/cellTree.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Cell Tree Builder
+ *
+ * Build hierarchical tree structure for cell filtering
+ * Structure: Tech → Band → Status → Individual Cells (configurable)
+ */
+import type { Cell, CellTreeConfig } from '../types';
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
+/**
+ * Build hierarchical tree from flat cell array with dynamic grouping
+ *
+ * @param cells - Array of cells to build tree from
+ * @param config - Grouping configuration (level1, level2)
+ * @param colorMap - Optional map of leaf group IDs to custom colors
+ * @returns Root tree node
+ */
+export declare function buildCellTree(cells: Cell[], config: CellTreeConfig, colorMap?: Map<string, string>): TreeNode;
+/**
+ * Get filtered cells based on checked tree paths
+ *
+ * @param checkedPaths - Set of checked node IDs from TreeView
+ * @param allCells - All available cells
+ * @returns Filtered array of cells
+ */
+export declare function getFilteredCells(checkedPaths: Set<string>, allCells: Cell[]): Cell[];