@smartnet360/svelte-components 0.0.124 → 0.0.126

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

@@ -0,0 +1,242 @@
+/**
+ * Custom Cell Sets Store
+ *
+ * Manages multiple custom cell sets, each loaded from a CSV file.
+ * Resolves cell data from the parent CellDataStore.
+ */
+import { browser } from '$app/environment';
+import { CUSTOM_CELL_PALETTE } from '../types';
+import { parseCustomCellsCsv, buildCellLookup } from '../logic/csv-parser';
+/**
+ * Generate a unique ID for a new set
+ */
+function generateSetId() {
+    return `set-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Store for managing custom cell sets
+ */
+export class CustomCellSetsStore {
+    /** All custom cell sets */
+    sets = $state([]);
+    /** Version counter for reactivity */
+    version = $state(0);
+    /** Reference to parent cell data store */
+    cellDataStore;
+    /** Storage key for persistence */
+    storageKey;
+    constructor(cellDataStore, namespace = 'default') {
+        this.cellDataStore = cellDataStore;
+        this.storageKey = `${namespace}:custom-cell-sets`;
+        if (browser) {
+            this.load();
+            // Auto-save on changes
+            $effect(() => {
+                // Read version to trigger on changes
+                const _v = this.version;
+                this.save();
+            });
+            // Re-resolve cells when main cell data changes
+            $effect(() => {
+                const cellCount = this.cellDataStore.rawCells.length;
+                if (cellCount > 0 && this.sets.length > 0) {
+                    // Check if any cells need resolution
+                    const needsResolution = this.sets.some(set => set.cells.some(c => !c.resolvedCell));
+                    if (needsResolution) {
+                        console.log('[CustomCellSetsStore] Re-resolving cells after main data loaded');
+                        this.refreshResolutions();
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Import a CSV file and create a new custom cell set
+     */
+    importFromCsv(csvContent, fileName) {
+        // Build lookup from all cells (unfiltered)
+        const cellLookup = buildCellLookup(this.cellDataStore.rawCells);
+        // Parse CSV
+        const result = parseCustomCellsCsv(csvContent, cellLookup);
+        return result;
+    }
+    /**
+     * Create a new set from import result
+     */
+    createSet(name, importResult) {
+        const id = generateSetId();
+        // Assign default colors to groups
+        const groupColors = {};
+        importResult.groups.forEach((group, idx) => {
+            groupColors[group] = CUSTOM_CELL_PALETTE[idx % CUSTOM_CELL_PALETTE.length];
+        });
+        const newSet = {
+            id,
+            name,
+            cells: importResult.cells,
+            unmatchedTxIds: importResult.unmatchedTxIds,
+            groups: importResult.groups,
+            extraColumns: importResult.extraColumns,
+            baseSize: 50,
+            opacity: 0.7,
+            defaultColor: CUSTOM_CELL_PALETTE[0],
+            groupColors,
+            visible: true,
+            visibleGroups: new Set(importResult.groups)
+        };
+        this.sets.push(newSet);
+        this.version++;
+        return newSet;
+    }
+    /**
+     * Remove a set by ID
+     */
+    removeSet(setId) {
+        const index = this.sets.findIndex(s => s.id === setId);
+        if (index !== -1) {
+            // Use filter to create a new array for proper reactivity
+            this.sets = this.sets.filter(s => s.id !== setId);
+            this.version++;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Get a set by ID
+     */
+    getSet(setId) {
+        return this.sets.find(s => s.id === setId);
+    }
+    /**
+     * Toggle set visibility
+     */
+    toggleSetVisibility(setId) {
+        const set = this.getSet(setId);
+        if (set) {
+            set.visible = !set.visible;
+            this.version++;
+        }
+    }
+    /**
+     * Toggle group visibility within a set
+     */
+    toggleGroupVisibility(setId, group) {
+        const set = this.getSet(setId);
+        if (set) {
+            if (set.visibleGroups.has(group)) {
+                set.visibleGroups.delete(group);
+            }
+            else {
+                set.visibleGroups.add(group);
+            }
+            this.version++;
+        }
+    }
+    /**
+     * Set group color
+     */
+    setGroupColor(setId, group, color) {
+        const set = this.getSet(setId);
+        if (set) {
+            set.groupColors[group] = color;
+            this.version++;
+        }
+    }
+    /**
+     * Update set display settings
+     */
+    updateSetSettings(setId, settings) {
+        const set = this.getSet(setId);
+        if (set) {
+            if (settings.baseSize !== undefined)
+                set.baseSize = settings.baseSize;
+            if (settings.opacity !== undefined)
+                set.opacity = settings.opacity;
+            if (settings.defaultColor !== undefined)
+                set.defaultColor = settings.defaultColor;
+            this.version++;
+        }
+    }
+    /**
+     * Rename a set
+     */
+    renameSet(setId, newName) {
+        const set = this.getSet(setId);
+        if (set) {
+            set.name = newName;
+            this.version++;
+        }
+    }
+    /**
+     * Get visible cells for a set (filtered by visible groups)
+     */
+    getVisibleCells(setId) {
+        const set = this.getSet(setId);
+        if (!set || !set.visible)
+            return [];
+        return set.cells.filter(c => c.resolvedCell && set.visibleGroups.has(c.customGroup));
+    }
+    /**
+     * Re-resolve cells after main cell data changes
+     */
+    refreshResolutions() {
+        const cellLookup = buildCellLookup(this.cellDataStore.rawCells);
+        for (const set of this.sets) {
+            for (const cell of set.cells) {
+                cell.resolvedCell = cellLookup.get(cell.txId);
+            }
+        }
+        this.version++;
+    }
+    /**
+     * Load from localStorage
+     */
+    load() {
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            if (stored) {
+                const data = JSON.parse(stored);
+                // Reconstruct sets with proper Set objects
+                this.sets = data.map((setData) => ({
+                    ...setData,
+                    visibleGroups: new Set(setData.visibleGroups || []),
+                    cells: setData.cells || []
+                }));
+                // Re-resolve cells
+                this.refreshResolutions();
+            }
+        }
+        catch (e) {
+            console.warn('[CustomCellSetsStore] Failed to load from storage', e);
+        }
+    }
+    /**
+     * Save to localStorage
+     */
+    save() {
+        try {
+            // Convert Sets to arrays for JSON serialization
+            const data = this.sets.map(set => ({
+                ...set,
+                visibleGroups: Array.from(set.visibleGroups),
+                // Don't persist resolved cells - will re-resolve on load
+                cells: set.cells.map(c => ({
+                    txId: c.txId,
+                    customGroup: c.customGroup,
+                    sizeFactor: c.sizeFactor,
+                    extraFields: c.extraFields
+                }))
+            }));
+            localStorage.setItem(this.storageKey, JSON.stringify(data));
+        }
+        catch (e) {
+            console.warn('[CustomCellSetsStore] Failed to save to storage', e);
+        }
+    }
+}
+/**
+ * Factory function to create a custom cell sets store
+ */
+export function createCustomCellSetsStore(cellDataStore, namespace = 'default') {
+    return new CustomCellSetsStore(cellDataStore, namespace);
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Stores - Barrel Export
+ */
+export { CustomCellSetsStore, createCustomCellSetsStore } from './custom-cell-sets.svelte';

package/dist/map-v3/features/cells/custom/stores/index.js

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Stores - Barrel Export
+ */
+export { CustomCellSetsStore, createCustomCellSetsStore } from './custom-cell-sets.svelte';

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

@@ -0,0 +1,83 @@
+/**
+ * Custom Cells Feature - Type Definitions
+ *
+ * Types for ad-hoc cell layers loaded from CSV files.
+ * Custom cells reference existing cells by txId and add custom grouping/sizing.
+ */
+import type { Cell } from '../../../../shared/demo';
+/**
+ * A custom cell entry from CSV import
+ */
+export interface CustomCell {
+    /** Required: Reference to cell in main data store */
+    txId: string;
+    /** Grouping field for TreeView (defaults to 'default' if not in CSV) */
+    customGroup: string;
+    /** Size multiplier for arc radius (defaults to 1) */
+    sizeFactor: number;
+    /** Any additional columns from CSV for tooltips */
+    extraFields: Record<string, string | number>;
+    /** Resolved cell data from main store (populated after import) */
+    resolvedCell?: Cell;
+}
+/**
+ * Import result from CSV parsing
+ */
+export interface CustomCellImportResult {
+    /** Successfully parsed and matched cells */
+    cells: CustomCell[];
+    /** Cell IDs that weren't found in main data store */
+    unmatchedTxIds: string[];
+    /** Discovered custom groups */
+    groups: string[];
+    /** Extra column names found in CSV */
+    extraColumns: string[];
+    /** Total rows in CSV */
+    totalRows: number;
+}
+/**
+ * A custom cell set - represents one uploaded CSV
+ */
+export interface CustomCellSet {
+    /** Unique identifier for this set */
+    id: string;
+    /** Display name (from filename or user input) */
+    name: string;
+    /** Cells in this set with resolved data */
+    cells: CustomCell[];
+    /** Cell IDs that weren't found during import */
+    unmatchedTxIds: string[];
+    /** All custom groups in this set */
+    groups: string[];
+    /** Extra column names for tooltip display */
+    extraColumns: string[];
+    /** Base arc radius in pixels (multiplied by sizeFactor per cell) */
+    baseSize: number;
+    /** Layer opacity (0-1) */
+    opacity: number;
+    /** Default color for groups without override */
+    defaultColor: string;
+    /** Per-group color overrides */
+    groupColors: Record<string, string>;
+    /** Whether this set's layer is visible */
+    visible: boolean;
+    /** Which groups are currently visible */
+    visibleGroups: Set<string>;
+}
+/**
+ * Configuration for creating a new custom cell set
+ */
+export interface CustomCellSetConfig {
+    name: string;
+    cells: CustomCell[];
+    unmatchedTxIds?: string[];
+    groups?: string[];
+    extraColumns?: string[];
+    baseSize?: number;
+    opacity?: number;
+    defaultColor?: string;
+}
+/**
+ * Default color palette for custom cell groups
+ */
+export declare const CUSTOM_CELL_PALETTE: string[];

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

@@ -0,0 +1,23 @@
+/**
+ * Custom Cells Feature - Type Definitions
+ *
+ * Types for ad-hoc cell layers loaded from CSV files.
+ * Custom cells reference existing cells by txId and add custom grouping/sizing.
+ */
+/**
+ * Default color palette for custom cell groups
+ */
+export const CUSTOM_CELL_PALETTE = [
+    '#e41a1c', // Red
+    '#377eb8', // Blue
+    '#4daf4a', // Green
+    '#984ea3', // Purple
+    '#ff7f00', // Orange
+    '#ffff33', // Yellow
+    '#a65628', // Brown
+    '#f781bf', // Pink
+    '#999999', // Gray
+    '#66c2a5', // Teal
+    '#fc8d62', // Coral
+    '#8da0cb', // Periwinkle
+];

package/dist/map-v3/shared/controls/MapControl.svelte

@@ -60,6 +60,7 @@
 	let controlElement: HTMLDivElement;
 	let collapsed = $state(initiallyCollapsed);
 	let control: IControl | null = null;
+	let isAdded = false;
 
 	// Reactively add/remove control when map becomes available/unavailable
 	$effect(() => {
@@ -67,13 +68,29 @@
 		if (map && controlElement) {
 			addControl(map);
 			return () => {
+				console.log(`[MapControl] Effect cleanup called for: ${title}`);
 				removeControl(map);
 			};
 		}
 	});
 
+	// Ensure control is removed when component is destroyed
+	onDestroy(() => {
+		console.log(`[MapControl] onDestroy called for: ${title}`);
+		const map = mapStore?.map;
+		if (map) {
+			removeControl(map);
+		}
+		// Also explicitly remove from DOM as fallback
+		// (Mapbox moves the element to its own container)
+		if (controlElement?.parentNode) {
+			controlElement.parentNode.removeChild(controlElement);
+		}
+	});
+
 	function addControl(map: MapboxMap) {
-		if (control) return;
+		if (control || isAdded) return;
+		isAdded = true;
 
 		// Create a custom Mapbox control
 		control = {
@@ -81,7 +98,7 @@
 				return controlElement;
 			},
 			onRemove: () => {
-				// Cleanup handled in onDestroy/effect cleanup
+				// Mapbox will remove the element from its container
 			}
 		};
 
@@ -90,12 +107,19 @@
 
 	function removeControl(map: MapboxMap) {
 		if (control) {
+			console.log(`[MapControl] Removing control: ${title}`);
 			try {
 				map.removeControl(control);
 			} catch (e) {
-				// Control may already be removed or map destroyed
+				console.log(`[MapControl] Error removing control (may already be removed): ${title}`, e);
 			}
 			control = null;
+			isAdded = false;
+		}
+		// Fallback: ensure element is removed from DOM
+		if (controlElement?.parentNode) {
+			console.log(`[MapControl] Fallback DOM removal for: ${title}`);
+			controlElement.parentNode.removeChild(controlElement);
 		}
 	}
 

package/package.json

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