@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/features/sites/layers/SitesLayer.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { SiteDataStore } from '../stores/site.data.svelte';
+	import type { SiteDisplayStore } from '../stores/site.display.svelte';
+	import type { SiteRegistry } from '../stores/site.registry.svelte';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: SiteDataStore;
+		displayStore: SiteDisplayStore;
+		registry: SiteRegistry;
+	}
+
+	let { dataStore, displayStore, registry }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'sites-source';
+	let layerId = 'sites-layer';
+	let updateTimeout: any;
+
+	$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)) {
+				map.addLayer({
+					id: layerId,
+					type: 'circle',
+					source: sourceId,
+					paint: {
+						'circle-radius': displayStore.radius,
+						'circle-color': ['get', 'color'],
+						'circle-opacity': displayStore.opacity,
+						'circle-stroke-color': displayStore.strokeColor,
+						'circle-stroke-width': displayStore.strokeWidth
+					}
+				});
+			}
+			
+			updateLayer();
+		};
+
+		addLayers();
+		map.on('style.load', addLayers);
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
+
+		return () => {
+			map.off('style.load', addLayers);
+			map.off('moveend', updateLayer);
+			map.off('zoomend', updateLayer);
+
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+		};
+	});
+
+	// React to display changes
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map || !map.getLayer(layerId)) return;
+
+		map.setPaintProperty(layerId, 'circle-radius', displayStore.radius);
+		// Color is now data-driven
+		// map.setPaintProperty(layerId, 'circle-color', displayStore.color);
+		map.setPaintProperty(layerId, 'circle-opacity', displayStore.opacity);
+		map.setPaintProperty(layerId, 'circle-stroke-color', displayStore.strokeColor);
+		map.setPaintProperty(layerId, 'circle-stroke-width', displayStore.strokeWidth);
+	});
+
+	// React to data changes
+	$effect(() => {
+		const _sites = dataStore.sites;
+		const _version = registry.version;
+		updateLayer();
+	});
+
+	function updateLayer() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			renderSites(map);
+		}, 100);
+	}
+
+	function renderSites(map: mapboxgl.Map) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		const sites = dataStore.sites;
+		const features: GeoJSON.Feature[] = [];
+
+		for (const site of sites) {
+			if (!registry.isVisible(site.siteId)) continue;
+			if (!bounds.contains([site.longitude, site.latitude])) continue;
+
+			const color = registry.getColor(site.level1, site.level2, displayStore.color);
+
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [site.longitude, site.latitude]
+				},
+				properties: {
+					siteId: site.siteId,
+					name: site.siteName,
+					color: color
+				}
+			});
+		}
+
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData({
+				type: 'FeatureCollection',
+				features
+			});
+		}
+	}
+</script>

package/dist/map-v3/features/sites/layers/SitesLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SiteDataStore } from '../stores/site.data.svelte';
+import type { SiteDisplayStore } from '../stores/site.display.svelte';
+import type { SiteRegistry } from '../stores/site.registry.svelte';
+interface Props {
+    dataStore: SiteDataStore;
+    displayStore: SiteDisplayStore;
+    registry: SiteRegistry;
+}
+declare const SitesLayer: import("svelte").Component<Props, {}, "">;
+type SitesLayer = ReturnType<typeof SitesLayer>;
+export default SitesLayer;

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

@@ -0,0 +1,9 @@
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
+import type { Site } from '../types';
+/**
+ * Converts a list of sites into a Tree structure for the TreeView component
+ * Structure: Root (Sites) -> Level 1 -> Level 2 -> Site
+ */
+export declare function buildSiteTree(sites: Site[]): TreeNode<{
+    count: number;
+}>[];

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

@@ -0,0 +1,75 @@
+/**
+ * Converts a list of sites into a Tree structure for the TreeView component
+ * Structure: Root (Sites) -> Level 1 -> Level 2 -> Site
+ */
+export function buildSiteTree(sites) {
+    // Root node
+    const rootNode = {
+        id: 'root-sites',
+        label: 'Sites',
+        children: [],
+        defaultExpanded: true
+    };
+    const level1Map = new Map();
+    for (const site of sites) {
+        const l1 = site.level1 || 'Unknown';
+        const l2 = site.level2 || 'Unknown';
+        // Level 1
+        if (!level1Map.has(l1)) {
+            const node = {
+                id: `l1-${l1}`,
+                label: l1,
+                children: [],
+                defaultExpanded: true
+            };
+            level1Map.set(l1, node);
+            rootNode.children.push(node);
+        }
+        const l1Node = level1Map.get(l1);
+        // Level 2
+        // We use a composite ID to ensure uniqueness if same L2 name exists in different L1s
+        // But we need to find the node object in the children array
+        let l2Node = l1Node.children.find(c => c.label === l2);
+        if (!l2Node) {
+            l2Node = {
+                id: `l2-${l1}-${l2}`,
+                label: l2,
+                children: [],
+                defaultExpanded: false,
+                metadata: {
+                    level1: l1,
+                    level2: l2,
+                    siteIds: [],
+                    count: 0,
+                    color: '#3388ff' // Default color, will be overridden by registry in UI
+                }
+            };
+            l1Node.children.push(l2Node);
+        }
+        // Add site to L2 metadata
+        l2Node.metadata.siteIds.push(site.siteId);
+        l2Node.metadata.count++;
+    }
+    // Sort Level 1
+    rootNode.children.sort((a, b) => a.label.localeCompare(b.label));
+    // Sort Level 2 and Calculate Counts
+    let totalCount = 0;
+    for (const l1Node of rootNode.children) {
+        let l1Count = 0;
+        if (l1Node.children) {
+            l1Node.children.sort((a, b) => a.label.localeCompare(b.label));
+            for (const l2Node of l1Node.children) {
+                const count = l2Node.metadata?.count || 0;
+                l1Count += count;
+                // Update L2 label with count
+                l2Node.label = `${l2Node.label} (${count})`;
+            }
+        }
+        totalCount += l1Count;
+        // Update L1 label with count
+        l1Node.label = `${l1Node.label} (${l1Count})`;
+    }
+    // Update Root label with count
+    rootNode.label = `${rootNode.label} (${totalCount})`;
+    return [rootNode];
+}

package/dist/map-v3/features/sites/stores/site.data.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
+import type { Site } from '../types';
+export declare class SiteDataStore {
+    cellDataStore: CellDataStore;
+    constructor(cellDataStore: CellDataStore);
+    get sites(): Site[];
+}
+export declare function createSiteDataStore(cellDataStore: CellDataStore): SiteDataStore;

package/dist/map-v3/features/sites/stores/site.data.svelte.js

@@ -0,0 +1,40 @@
+export class SiteDataStore {
+    cellDataStore;
+    constructor(cellDataStore) {
+        this.cellDataStore = cellDataStore;
+    }
+    get sites() {
+        const cells = this.cellDataStore.filteredCells;
+        const siteMap = new Map();
+        for (const cell of cells) {
+            if (!cell.siteId)
+                continue;
+            if (!siteMap.has(cell.siteId)) {
+                siteMap.set(cell.siteId, {
+                    siteId: cell.siteId,
+                    siteName: cell.cellName, // Fallback to cell name if site name not available
+                    latitude: cell.siteLatitude || cell.latitude,
+                    longitude: cell.siteLongitude || cell.longitude,
+                    techs: [cell.tech],
+                    fbands: [cell.fband],
+                    provider: 'Cetin',
+                    level1: 'Cetin', // Need to check where provider comes from in V3,
+                    level2: 'Unknown',
+                    cellCount: 1
+                });
+            }
+            else {
+                const site = siteMap.get(cell.siteId);
+                if (!site.techs.includes(cell.tech))
+                    site.techs.push(cell.tech);
+                if (!site.fbands.includes(cell.fband))
+                    site.fbands.push(cell.fband);
+                site.cellCount++;
+            }
+        }
+        return Array.from(siteMap.values());
+    }
+}
+export function createSiteDataStore(cellDataStore) {
+    return new SiteDataStore(cellDataStore);
+}

package/dist/map-v3/features/sites/stores/site.display.svelte.d.ts

@@ -0,0 +1,20 @@
+export declare class SiteDisplayStore {
+    key: string;
+    radius: number;
+    color: string;
+    opacity: number;
+    strokeColor: string;
+    strokeWidth: number;
+    showLabels: boolean;
+    labelPixelDistance: number;
+    labelFontSize: number;
+    labelColor: string;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    labels: {
+        primary: string;
+        secondary: string;
+    };
+    constructor();
+}
+export declare function createSiteDisplayStore(): SiteDisplayStore;

package/dist/map-v3/features/sites/stores/site.display.svelte.js

@@ -0,0 +1,63 @@
+import { browser } from '$app/environment';
+export class SiteDisplayStore {
+    key = 'map-v3-site-display';
+    // Circle Appearance
+    radius = $state(6);
+    color = $state('#808080'); // Default gray for sites
+    opacity = $state(0.8);
+    strokeColor = $state('#ffffff');
+    strokeWidth = $state(1);
+    // Label Settings
+    showLabels = $state(false);
+    labelPixelDistance = $state(15);
+    labelFontSize = $state(12);
+    labelColor = $state('#333333');
+    labelHaloColor = $state('#ffffff');
+    labelHaloWidth = $state(1);
+    // Label Fields
+    labels = $state({ primary: 'siteId', secondary: 'none' });
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    this.radius = parsed.radius ?? 6;
+                    this.color = parsed.color ?? '#808080';
+                    this.opacity = parsed.opacity ?? 0.8;
+                    this.strokeColor = parsed.strokeColor ?? '#ffffff';
+                    this.strokeWidth = parsed.strokeWidth ?? 1;
+                    this.showLabels = parsed.showLabels ?? false;
+                    this.labelPixelDistance = parsed.labelPixelDistance ?? 15;
+                    this.labelFontSize = parsed.labelFontSize ?? 12;
+                    this.labelColor = parsed.labelColor ?? '#333333';
+                    this.labelHaloColor = parsed.labelHaloColor ?? '#ffffff';
+                    this.labelHaloWidth = parsed.labelHaloWidth ?? 1;
+                    this.labels = parsed.labels ?? { primary: 'siteId', secondary: 'none' };
+                }
+                catch (e) {
+                    console.error('Failed to load site display settings', e);
+                }
+            }
+            $effect(() => {
+                localStorage.setItem(this.key, JSON.stringify({
+                    radius: this.radius,
+                    color: this.color,
+                    opacity: this.opacity,
+                    strokeColor: this.strokeColor,
+                    strokeWidth: this.strokeWidth,
+                    showLabels: this.showLabels,
+                    labelPixelDistance: this.labelPixelDistance,
+                    labelFontSize: this.labelFontSize,
+                    labelColor: this.labelColor,
+                    labelHaloColor: this.labelHaloColor,
+                    labelHaloWidth: this.labelHaloWidth,
+                    labels: this.labels
+                }));
+            });
+        }
+    }
+}
+export function createSiteDisplayStore() {
+    return new SiteDisplayStore();
+}

package/dist/map-v3/features/sites/stores/site.registry.svelte.d.ts

@@ -0,0 +1,13 @@
+export declare class SiteRegistry {
+    namespace: string;
+    hiddenSites: Set<string>;
+    groupColors: Map<string, string>;
+    version: number;
+    constructor(namespace: string);
+    isVisible(siteId: string): boolean;
+    getColor(level1: string, level2: string, defaultColor?: string): string;
+    setGroupColor(level1: string, level2: string, color: string): void;
+    toggleVisibility(siteId: string, visible?: boolean): void;
+    setVisible(siteIds: string[], visible: boolean): void;
+}
+export declare function createSiteRegistry(namespace: string): SiteRegistry;

package/dist/map-v3/features/sites/stores/site.registry.svelte.js

@@ -0,0 +1,83 @@
+import { browser } from '$app/environment';
+export class SiteRegistry {
+    namespace;
+    // Map of siteId -> visible (boolean)
+    // If a siteId is NOT in the map, it is assumed visible (default true)
+    hiddenSites = $state(new Set());
+    // Map of Group ID (e.g. "L1:L2") -> Color
+    groupColors = $state(new Map());
+    // Version counter to trigger reactivity in layers
+    version = $state(0);
+    constructor(namespace) {
+        this.namespace = namespace;
+        if (browser) {
+            // Load state
+            const savedColors = localStorage.getItem(`${this.namespace}:site-colors`);
+            if (savedColors) {
+                try {
+                    const parsed = JSON.parse(savedColors);
+                    this.groupColors = new Map(parsed);
+                }
+                catch (e) {
+                    console.warn('Failed to load site colors', e);
+                }
+            }
+        }
+        $effect(() => {
+            if (browser) {
+                localStorage.setItem(`${this.namespace}:site-colors`, JSON.stringify(Array.from(this.groupColors.entries())));
+            }
+        });
+    }
+    isVisible(siteId) {
+        return !this.hiddenSites.has(siteId);
+    }
+    getColor(level1, level2, defaultColor = '#3388ff') {
+        const key = `${level1}:${level2}`;
+        return this.groupColors.get(key) || defaultColor;
+    }
+    setGroupColor(level1, level2, color) {
+        const key = `${level1}:${level2}`;
+        this.groupColors.set(key, color);
+        // Force reactivity
+        this.groupColors = new Map(this.groupColors);
+        this.version++;
+    }
+    toggleVisibility(siteId, visible) {
+        const isHidden = this.hiddenSites.has(siteId);
+        const shouldBeVisible = visible !== undefined ? visible : isHidden;
+        if (shouldBeVisible) {
+            this.hiddenSites.delete(siteId);
+        }
+        else {
+            this.hiddenSites.add(siteId);
+        }
+        // Force reactivity
+        this.hiddenSites = new Set(this.hiddenSites);
+        this.version++;
+    }
+    setVisible(siteIds, visible) {
+        let changed = false;
+        for (const id of siteIds) {
+            if (visible) {
+                if (this.hiddenSites.has(id)) {
+                    this.hiddenSites.delete(id);
+                    changed = true;
+                }
+            }
+            else {
+                if (!this.hiddenSites.has(id)) {
+                    this.hiddenSites.add(id);
+                    changed = true;
+                }
+            }
+        }
+        if (changed) {
+            this.hiddenSites = new Set(this.hiddenSites);
+            this.version++;
+        }
+    }
+}
+export function createSiteRegistry(namespace) {
+    return new SiteRegistry(namespace);
+}

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

@@ -0,0 +1,12 @@
+export interface Site {
+    siteId: string;
+    siteName: string;
+    latitude: number;
+    longitude: number;
+    techs: string[];
+    fbands: string[];
+    provider: string;
+    level1: string;
+    level2: string;
+    cellCount: number;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+export * from './core';
+export * from './shared';
+export * from './features/cells/types';
+export { default as CellsLayer } from './features/cells/layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './features/cells/layers/CellLabelsLayer.svelte';
+export { default as CellFilterControl } from './features/cells/components/CellFilterControl.svelte';
+export { default as CellSettingsPanel } from './features/cells/components/CellSettingsPanel.svelte';
+export * from './features/cells/stores/cell.data.svelte';
+export * from './features/cells/stores/cell.display.svelte';
+export * from './features/cells/stores/cell.registry.svelte';
+export * from './features/repeaters/types';
+export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';
+export { default as RepeaterLabelsLayer } from './features/repeaters/layers/RepeaterLabelsLayer.svelte';
+export { default as RepeaterFilterControl } from './features/repeaters/components/RepeaterFilterControl.svelte';
+export { default as RepeaterSettingsPanel } from './features/repeaters/components/RepeaterSettingsPanel.svelte';
+export * from './features/repeaters/stores/repeater.data.svelte';
+export * from './features/repeaters/stores/repeater.display.svelte';
+export * from './features/repeaters/stores/repeater.registry.svelte';
+export * from './features/sites/types';
+export { default as SitesLayer } from './features/sites/layers/SitesLayer.svelte';
+export { default as SiteLabelsLayer } from './features/sites/layers/SiteLabelsLayer.svelte';
+export { default as SiteFilterControl } from './features/sites/components/SiteFilterControl.svelte';
+export { default as SiteSettingsPanel } from './features/sites/components/SiteSettingsPanel.svelte';
+export * from './features/sites/stores/site.data.svelte';
+export * from './features/sites/stores/site.display.svelte';
+export * from './features/sites/stores/site.registry.svelte';

package/dist/map-v3/index.js

@@ -0,0 +1,31 @@
+// Core
+export * from './core';
+// Shared
+export * from './shared';
+// Features - Cells
+export * from './features/cells/types';
+export { default as CellsLayer } from './features/cells/layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './features/cells/layers/CellLabelsLayer.svelte';
+export { default as CellFilterControl } from './features/cells/components/CellFilterControl.svelte';
+export { default as CellSettingsPanel } from './features/cells/components/CellSettingsPanel.svelte';
+export * from './features/cells/stores/cell.data.svelte';
+export * from './features/cells/stores/cell.display.svelte';
+export * from './features/cells/stores/cell.registry.svelte';
+// Features - Repeaters
+export * from './features/repeaters/types';
+export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';
+export { default as RepeaterLabelsLayer } from './features/repeaters/layers/RepeaterLabelsLayer.svelte';
+export { default as RepeaterFilterControl } from './features/repeaters/components/RepeaterFilterControl.svelte';
+export { default as RepeaterSettingsPanel } from './features/repeaters/components/RepeaterSettingsPanel.svelte';
+export * from './features/repeaters/stores/repeater.data.svelte';
+export * from './features/repeaters/stores/repeater.display.svelte';
+export * from './features/repeaters/stores/repeater.registry.svelte';
+// Features - Sites
+export * from './features/sites/types';
+export { default as SitesLayer } from './features/sites/layers/SitesLayer.svelte';
+export { default as SiteLabelsLayer } from './features/sites/layers/SiteLabelsLayer.svelte';
+export { default as SiteFilterControl } from './features/sites/components/SiteFilterControl.svelte';
+export { default as SiteSettingsPanel } from './features/sites/components/SiteSettingsPanel.svelte';
+export * from './features/sites/stores/site.data.svelte';
+export * from './features/sites/stores/site.display.svelte';
+export * from './features/sites/stores/site.registry.svelte';