@smartnet360/svelte-components 0.0.57 → 0.0.58

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

@@ -0,0 +1,226 @@
+/**
+ * Cell Tree Builder
+ *
+ * Build hierarchical tree structure for cell filtering
+ * Structure: Tech → Band → Status → Individual Cells (configurable)
+ */
+/**
+ * Get the value of a grouping field from a cell
+ */
+function getGroupingValue(cell, field) {
+    switch (field) {
+        case 'tech':
+            return cell.tech;
+        case 'band':
+            return cell.frq; // Use numeric band from 'frq' field
+        case 'status':
+            return cell.status;
+        case 'siteId':
+            return cell.siteId;
+        case 'customSubgroup':
+            return cell.customSubgroup || 'Ungrouped';
+        case 'type':
+            return cell.type;
+        case 'planner':
+            return cell.planner || 'Unassigned';
+        case 'none':
+            return '';
+        default:
+            return 'Unknown';
+    }
+}
+/**
+ * Get a human-readable label for a grouping field value
+ */
+function getGroupLabel(field, value, count) {
+    switch (field) {
+        case 'tech':
+            return `${value} (${count})`;
+        case 'band':
+            return `${value} MHz (${count})`;
+        case 'status':
+            return `${value} (${count})`;
+        case 'siteId':
+            return `${value} (${count})`;
+        case 'customSubgroup':
+            return `${value} (${count})`;
+        case 'type':
+            return `${value} (${count})`;
+        case 'planner':
+            return `${value} (${count})`;
+        default:
+            return `${value} (${count})`;
+    }
+}
+/**
+ * Generate a unique node ID based on grouping path
+ */
+function generateNodeId(field, value, parentId) {
+    if (parentId) {
+        return `${parentId}:${value}`;
+    }
+    return value;
+}
+/**
+ * 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 function buildCellTree(cells, config, colorMap) {
+    const { level1, level2 } = config;
+    // If level2 is 'none', create flat 2-level tree
+    if (level2 === 'none') {
+        return buildFlatTree(cells, level1, colorMap);
+    }
+    // Otherwise, create nested 3-level tree
+    return buildNestedTree(cells, level1, level2, colorMap);
+}
+/**
+ * Build flat 2-level tree (Root → Level1 groups)
+ */
+function buildFlatTree(cells, level1, colorMap) {
+    // Group cells by level1 field
+    const groups = new Map();
+    cells.forEach((cell) => {
+        const value = getGroupingValue(cell, level1);
+        if (!groups.has(value)) {
+            groups.set(value, []);
+        }
+        groups.get(value).push(cell);
+    });
+    // Sort groups alphabetically
+    const sortedGroups = Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Build tree nodes
+    const children = sortedGroups.map(([value, groupCells]) => {
+        const nodeId = generateNodeId(level1, value);
+        const color = colorMap?.get(nodeId);
+        return {
+            id: nodeId,
+            label: getGroupLabel(level1, value, groupCells.length),
+            defaultChecked: true,
+            children: [],
+            metadata: {
+                type: 'leafGroup',
+                groupingField: level1,
+                groupingValue: value,
+                cellIds: groupCells.map((c) => c.id),
+                color
+            }
+        };
+    });
+    return {
+        id: 'root',
+        label: `Cells (${cells.length})`,
+        defaultChecked: true,
+        children,
+        metadata: {
+            type: 'root'
+        }
+    };
+}
+/**
+ * Build nested 3-level tree (Root → Level1 → Level2 groups)
+ */
+function buildNestedTree(cells, level1, level2, colorMap) {
+    // Group cells by level1, then by level2
+    const level1Groups = new Map();
+    cells.forEach((cell) => {
+        const value1 = getGroupingValue(cell, level1);
+        const value2 = getGroupingValue(cell, level2);
+        if (!level1Groups.has(value1)) {
+            level1Groups.set(value1, new Map());
+        }
+        const level2Groups = level1Groups.get(value1);
+        if (!level2Groups.has(value2)) {
+            level2Groups.set(value2, []);
+        }
+        level2Groups.get(value2).push(cell);
+    });
+    // Sort level1 groups
+    const sortedLevel1 = Array.from(level1Groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Build tree nodes
+    const children = sortedLevel1.map(([value1, level2Groups]) => {
+        const parentId = generateNodeId(level1, value1);
+        // Sort level2 groups
+        const sortedLevel2 = Array.from(level2Groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+        const level2Children = sortedLevel2.map(([value2, groupCells]) => {
+            const nodeId = generateNodeId(level2, value2, parentId);
+            const color = colorMap?.get(nodeId);
+            return {
+                id: nodeId,
+                label: getGroupLabel(level2, value2, groupCells.length),
+                defaultChecked: true,
+                children: [],
+                metadata: {
+                    type: 'leafGroup',
+                    groupingField: level2,
+                    groupingValue: value2,
+                    parentGroupingField: level1,
+                    parentGroupingValue: value1,
+                    cellIds: groupCells.map((c) => c.id),
+                    color
+                }
+            };
+        });
+        // Calculate total cells in this level1 group
+        const totalCells = Array.from(level2Groups.values()).flat().length;
+        return {
+            id: parentId,
+            label: getGroupLabel(level1, value1, totalCells),
+            defaultChecked: true,
+            children: level2Children,
+            metadata: {
+                type: 'parentGroup',
+                groupingField: level1,
+                groupingValue: value1
+            }
+        };
+    });
+    return {
+        id: 'root',
+        label: `Cells (${cells.length})`,
+        defaultChecked: true,
+        children,
+        metadata: {
+            type: 'root'
+        }
+    };
+}
+/**
+ * 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 function getFilteredCells(checkedPaths, allCells) {
+    // If root is checked (or no specific filters), return all cells
+    if (checkedPaths.has('root') && checkedPaths.size === 1) {
+        return allCells;
+    }
+    // Filter cells that match any of the checked paths
+    const filtered = allCells.filter((cell) => {
+        // Check if this cell belongs to any checked path
+        return Array.from(checkedPaths).some((path) => {
+            // Match cell properties against path segments
+            if (path === 'root')
+                return true;
+            // Parse path and check if cell matches
+            const segments = path.split(':');
+            // Simple string matching against cell properties
+            return segments.every((segment) => {
+                return (cell.tech === segment ||
+                    cell.frq === segment ||
+                    cell.status === segment ||
+                    cell.siteId === segment ||
+                    cell.customSubgroup === segment ||
+                    cell.type === segment ||
+                    cell.planner === segment);
+            });
+        });
+    });
+    return filtered;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Tech-Band Parser
+ *
+ * Parse mixed format fband strings to standardized tech-band keys
+ */
+import type { ParsedTechBand } from '../types';
+/**
+ * Parse fband string to tech-band components
+ * @example parseTechBand('LTE2600') → { tech: '4G', band: '2600', key: '4G_2600' }
+ */
+export declare function parseTechBand(fband: string): ParsedTechBand | null;

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

@@ -0,0 +1,17 @@
+/**
+ * Tech-Band Parser
+ *
+ * Parse mixed format fband strings to standardized tech-band keys
+ */
+// TODO: Implement parseTechBand
+// - Handle formats: 'LTE700', 'GSM900', '5G-3500'
+// - Return { tech, band, key }
+// - Export helper functions
+/**
+ * Parse fband string to tech-band components
+ * @example parseTechBand('LTE2600') → { tech: '4G', band: '2600', key: '4G_2600' }
+ */
+export function parseTechBand(fband) {
+    // TODO: Implementation
+    return null;
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Zoom-Based Scaling
+ *
+ * Calculate radius adjustments based on zoom level
+ * Maintains visual size consistency across zoom levels
+ */
+import type { TechnologyBandKey } from '../types';
+/**
+ * Get zoom factor for visual size scaling
+ * Lower zoom = larger radius (to compensate for zoomed out view)
+ * Higher zoom = smaller radius (to compensate for zoomed in view)
+ *
+ * Formula: 2^((referenceZoom - currentZoom) / 2)
+ * - At zoom 12 (reference): factor = 1.0
+ * - At zoom 10: factor = 2.0 (double the radius)
+ * - At zoom 14: factor = 0.5 (half the radius)
+ *
+ * @param currentZoom - Current map zoom level
+ * @returns Scaling factor for radius
+ */
+export declare function getZoomFactor(currentZoom: number): number;
+/**
+ * Calculate final radius for a cell based on base radius, tech-band, and zoom
+ *
+ * Formula: baseRadius × techBandMultiplier × zoomFactor
+ *
+ * @param baseRadius - Base radius in meters (e.g., 500)
+ * @param techBand - Technology-band key (e.g., '4G_2600')
+ * @param currentZoom - Current map zoom level
+ * @returns Final radius in meters
+ *
+ * @example
+ * // 4G-2600 at zoom 12 with 500m base
+ * calculateRadius(500, '4G_2600', 12)
+ * // Returns: 500 × 0.6 × 1.0 = 300 meters
+ *
+ * @example
+ * // Same cell at zoom 10 (zoomed out)
+ * calculateRadius(500, '4G_2600', 10)
+ * // Returns: 500 × 0.6 × 2.0 = 600 meters (larger to stay visible)
+ */
+export declare function calculateRadius(baseRadius: number, techBand: TechnologyBandKey, currentZoom: number): number;

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

@@ -0,0 +1,53 @@
+/**
+ * Zoom-Based Scaling
+ *
+ * Calculate radius adjustments based on zoom level
+ * Maintains visual size consistency across zoom levels
+ */
+import { RADIUS_MULTIPLIER } from '../constants/radiusMultipliers';
+/**
+ * Reference zoom level where base radius is used as-is
+ * At zoom 12, radius = baseRadius * techBandMultiplier
+ */
+const REFERENCE_ZOOM = 12;
+/**
+ * Get zoom factor for visual size scaling
+ * Lower zoom = larger radius (to compensate for zoomed out view)
+ * Higher zoom = smaller radius (to compensate for zoomed in view)
+ *
+ * Formula: 2^((referenceZoom - currentZoom) / 2)
+ * - At zoom 12 (reference): factor = 1.0
+ * - At zoom 10: factor = 2.0 (double the radius)
+ * - At zoom 14: factor = 0.5 (half the radius)
+ *
+ * @param currentZoom - Current map zoom level
+ * @returns Scaling factor for radius
+ */
+export function getZoomFactor(currentZoom) {
+    return Math.pow(2, (REFERENCE_ZOOM - currentZoom) / 2);
+}
+/**
+ * Calculate final radius for a cell based on base radius, tech-band, and zoom
+ *
+ * Formula: baseRadius × techBandMultiplier × zoomFactor
+ *
+ * @param baseRadius - Base radius in meters (e.g., 500)
+ * @param techBand - Technology-band key (e.g., '4G_2600')
+ * @param currentZoom - Current map zoom level
+ * @returns Final radius in meters
+ *
+ * @example
+ * // 4G-2600 at zoom 12 with 500m base
+ * calculateRadius(500, '4G_2600', 12)
+ * // Returns: 500 × 0.6 × 1.0 = 300 meters
+ *
+ * @example
+ * // Same cell at zoom 10 (zoomed out)
+ * calculateRadius(500, '4G_2600', 10)
+ * // Returns: 500 × 0.6 × 2.0 = 600 meters (larger to stay visible)
+ */
+export function calculateRadius(baseRadius, techBand, currentZoom) {
+    const techBandMultiplier = RADIUS_MULTIPLIER[techBand] || 1.0;
+    const zoomFactor = getZoomFactor(currentZoom);
+    return baseRadius * techBandMultiplier * zoomFactor;
+}

package/dist/map-v2/index.d.ts

@@ -4,7 +4,8 @@
  * A decoupled, feature-based architecture for Mapbox cellular network visualization.
  * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
  */
-export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, MapStyleControl, createMapStore, useMapbox, tryUseMapbox } from './core';
+export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStyleControl, createMapStore, createViewportStore, type ViewportStore, type ViewportState, useMapbox, tryUseMapbox } from './core';
 export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
 export { type Site, type SiteStoreValue, type SiteStoreContext, createSiteStore, createSiteStoreContext, SitesLayer, SiteFilterControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
-export { DemoMap, demoSites } from './demo';
+export { type Cell, type CellStatus, type CellStatusStyle, type CellGroupingField, type CellTreeConfig, type TechnologyBandKey, type CellStoreValue, type CellStoreContext, createCellStoreContext, CellsLayer, CellFilterControl, CellStyleControl, cellsToGeoJSON, buildCellTree, getFilteredCells, calculateRadius, getZoomFactor, createArcPolygon, DEFAULT_CELL_TREE_CONFIG, TECHNOLOGY_BAND_COLORS, DEFAULT_STATUS_STYLES, RADIUS_MULTIPLIER } from './features/cells';
+export { DemoMap, demoSites, demoCells } from './demo';

package/dist/map-v2/index.js

@@ -7,7 +7,7 @@
 // ============================================================================
 // CORE INFRASTRUCTURE
 // ============================================================================
-export { MAP_CONTEXT_KEY, MapboxProvider, MapStyleControl, createMapStore, useMapbox, tryUseMapbox } from './core';
+export { MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStyleControl, createMapStore, createViewportStore, useMapbox, tryUseMapbox } from './core';
 // ============================================================================
 // SHARED UTILITIES
 // ============================================================================
@@ -17,6 +17,10 @@ export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing
 // ============================================================================
 export { createSiteStore, createSiteStoreContext, SitesLayer, SiteFilterControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
 // ============================================================================
+// CELL FEATURE
+// ============================================================================
+export { createCellStoreContext, CellsLayer, CellFilterControl, CellStyleControl, cellsToGeoJSON, buildCellTree, getFilteredCells, calculateRadius, getZoomFactor, createArcPolygon, DEFAULT_CELL_TREE_CONFIG, TECHNOLOGY_BAND_COLORS, DEFAULT_STATUS_STYLES, RADIUS_MULTIPLIER } from './features/cells';
+// ============================================================================
 // DEMO
 // ============================================================================
-export { DemoMap, demoSites } from './demo';
+export { DemoMap, demoSites, demoCells } from './demo';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.57",
+	"version": "0.0.58",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",