@smartnet360/svelte-components 0.0.145 → 0.0.147

package/dist/map-v3/features/custom/components/CustomCellSetManager.svelte

@@ -494,6 +494,7 @@
 				{#each setsStore.sets as set (set.id)}
 					{@const isExpanded = expandedSets.has(set.id)}
 					{@const treeStore = treeStores.get(set.id)}
+					{@const hasPoints = set.cells.some(c => c.geometry === 'point')}
 					<div class="set-section" class:expanded={isExpanded}>
 						<!-- Set Header -->
 						<div class="set-header d-flex align-items-center justify-content-between px-2 py-2">
@@ -512,6 +513,15 @@
 								>
 									<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
 								</button>
+								<button
+									class="btn btn-sm p-0 me-2"
+									title={!hasPoints ? 'No points to label' : set.showLabels ? 'Hide Labels' : 'Show Labels'}
+									aria-label={!hasPoints ? 'No points to label' : set.showLabels ? 'Hide Labels' : 'Show Labels'}
+									onclick={() => setsStore.toggleSetLabels(set.id)}
+									disabled={!hasPoints}
+								>
+									<i class="bi bi-tag{!hasPoints ? ' text-muted opacity-50' : set.showLabels ? '-fill text-primary' : ' text-muted'}"></i>
+								</button>
 								<div class="set-info text-truncate" onclick={() => toggleExpanded(set.id)} style="cursor: pointer;">
 									<div class="fw-medium small text-truncate">{set.name}</div>
 									<small class="text-muted">{getSetItemCounts(set)} · {set.groups.length} groups</small>

package/dist/map-v3/features/custom/layers/CustomCellsLayer.svelte

@@ -51,11 +51,13 @@
 		cellFill: string; 
 		cellLine: string; 
 		pointCircle: string;
+		pointLabel: string;
 	} {
 		return {
 			cellFill: `custom-cells-fill-${setId}`,
 			cellLine: `custom-cells-line-${setId}`,
-			pointCircle: `custom-points-circle-${setId}`
+			pointCircle: `custom-points-circle-${setId}`,
+			pointLabel: `custom-points-label-${setId}`
 		};
 	}
 
@@ -129,6 +131,30 @@
 			});
 			activeLayers.add(layers.pointCircle);
 		}
+
+		// Add points label layer (symbol layer for text)
+		if (!map.getLayer(layers.pointLabel)) {
+			map.addLayer({
+				id: layers.pointLabel,
+				type: 'symbol',
+				source: sources.points,
+				layout: {
+					'text-field': ['get', 'labelText'],
+					'text-size': 11,
+					'text-anchor': 'top',
+					'text-offset': [0, 0.8],
+					'text-allow-overlap': false,
+					'text-ignore-placement': false,
+					'visibility': set.showLabels ? 'visible' : 'none'
+				},
+				paint: {
+					'text-color': '#333',
+					'text-halo-color': '#fff',
+					'text-halo-width': 1.5
+				}
+			});
+			activeLayers.add(layers.pointLabel);
+		}
 	}
 
 	/**
@@ -138,8 +164,8 @@
 		const sources = getSourceIds(setIdToRemove);
 		const layers = getLayerIds(setIdToRemove);
 
-		// Remove layers
-		for (const layerId of [layers.cellLine, layers.cellFill, layers.pointCircle]) {
+		// Remove layers (label layer must be removed first since it's on top)
+		for (const layerId of [layers.pointLabel, layers.cellLine, layers.cellFill, layers.pointCircle]) {
 			if (map.getLayer(layerId)) {
 				map.removeLayer(layerId);
 				activeLayers.delete(layerId);
@@ -189,6 +215,9 @@
 				// Darken color for stroke
 				const strokeColor = darkenColor(color, 0.3);
 
+				// Generate label text from first 3 extra fields
+				const labelText = buildLabelText(item.extraFields);
+
 				pointFeatures.push({
 					type: 'Feature',
 					geometry: {
@@ -203,7 +232,8 @@
 						customGroup: item.customGroup,
 						sizeFactor: item.sizeFactor,
 						setName: set.name,
-						popupInfo: { ...item.extraFields }
+						popupInfo: { ...item.extraFields },
+						labelText
 					}
 				});
 			} else if (item.geometry === 'cell' && item.resolvedCell) {
@@ -259,9 +289,23 @@
 			map.setPaintProperty(layers.pointCircle, 'circle-opacity', set.opacity);
 		}
 
+		// Update label visibility
+		if (map.getLayer(layers.pointLabel)) {
+			map.setLayoutProperty(layers.pointLabel, 'visibility', set.showLabels ? 'visible' : 'none');
+		}
+
 		console.log(`[CustomLayer] Rendered ${cellFeatures.length} cells, ${pointFeatures.length} points for set "${set.name}"`);
 	}
 
+	/**
+	 * Build label text from extra fields (first 3 values, newline separated)
+	 */
+	function buildLabelText(extraFields: Record<string, string | number> | undefined): string {
+		if (!extraFields) return '';
+		const values = Object.values(extraFields).slice(0, 3);
+		return values.filter(v => v !== undefined && v !== null && v !== '').join('\n');
+	}
+
 	/**
 	 * Darken a hex color by a factor
 	 */

package/dist/map-v3/features/custom/logic/csv-parser.js

@@ -138,14 +138,23 @@ export function parseCustomCellsCsv(csvContent, cellLookup, options = {}) {
     const groupsSet = new Set();
     let cellCount = 0;
     let pointCount = 0;
+    let autoIdCounter = 0;
     for (let i = 1; i < lines.length; i++) {
         const line = lines[i].trim();
         if (!line)
             continue;
         const values = parseCSVLine(line, actualDelimiter);
-        const itemId = values[idIndex]?.trim();
-        if (!itemId)
-            continue;
+        // Get item ID - auto-generate for points if no ID column mapped
+        let itemId;
+        if (idIndex >= 0) {
+            itemId = values[idIndex]?.trim() || '';
+            if (!itemId)
+                continue; // Skip rows with empty ID when ID column is mapped
+        }
+        else {
+            // No ID column mapped - will auto-generate for points
+            itemId = '';
+        }
         // Get custom group (default to 'default')
         const customGroup = groupIndex !== -1
             ? (values[groupIndex]?.trim() || 'default')
@@ -187,8 +196,10 @@ export function parseCustomCellsCsv(csvContent, cellLookup, options = {}) {
                 lat = parsedLat;
                 lon = parsedLon;
                 pointCount++;
+                // Auto-generate ID for points if not mapped
+                const pointId = itemId || `Point ${++autoIdCounter}`;
                 cells.push({
-                    id: itemId,
+                    id: pointId,
                     customGroup,
                     sizeFactor,
                     extraFields,
@@ -199,7 +210,9 @@ export function parseCustomCellsCsv(csvContent, cellLookup, options = {}) {
                 continue;
             }
         }
-        // No valid lat/lon - try to resolve as cell
+        // No valid lat/lon - try to resolve as cell (requires ID)
+        if (!itemId)
+            continue; // Can't resolve cell without ID
         resolvedCell = cellLookup.get(itemId);
         if (resolvedCell) {
             cellCount++;

package/dist/map-v3/features/custom/stores/custom-cell-sets.svelte.d.ts

@@ -51,6 +51,10 @@ export declare class CustomCellSetsStore {
      * Toggle set visibility
      */
     toggleSetVisibility(setId: string): void;
+    /**
+     * Toggle set labels visibility
+     */
+    toggleSetLabels(setId: string): void;
     /**
      * Toggle group visibility within a set
      */

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

@@ -101,6 +101,7 @@ export class CustomCellSetsStore {
             defaultColor: CUSTOM_CELL_PALETTE[0],
             groupColors,
             visible: true,
+            showLabels: false,
             visibleGroups: new Set(importResult.groups)
         };
         this.sets.push(newSet);
@@ -136,6 +137,16 @@ export class CustomCellSetsStore {
             this.version++;
         }
     }
+    /**
+     * Toggle set labels visibility
+     */
+    toggleSetLabels(setId) {
+        const set = this.getSet(setId);
+        if (set) {
+            set.showLabels = !set.showLabels;
+            this.version++;
+        }
+    }
     /**
      * Toggle group visibility within a set
      */
@@ -227,6 +238,7 @@ export class CustomCellSetsStore {
                 this.sets = data.map((setData) => ({
                     ...setData,
                     visibleGroups: new Set(setData.visibleGroups || []),
+                    showLabels: setData.showLabels ?? false,
                     cells: setData.cells || []
                 }));
                 // Re-resolve cells

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

@@ -81,6 +81,8 @@ export interface CustomCellSet {
     groupColors: Record<string, string>;
     /** Whether this set's layer is visible */
     visible: boolean;
+    /** Whether to show labels for points */
+    showLabels: boolean;
     /** Which groups are currently visible */
     visibleGroups: Set<string>;
 }

package/dist/shared/csv-import/column-detector.d.ts

@@ -17,8 +17,11 @@ export declare function detectFieldType(header: string): StandardFieldType | nul
 /**
  * Auto-detect column mapping from headers
  * Returns suggested mapping based on alias matching
+ * @param headers - CSV column headers
+ * @param fieldsConfig - Field configuration for the import mode
+ * @param mode - Import mode (used to customize detection behavior)
  */
-export declare function detectColumnMapping(headers: string[], fieldsConfig: ImportFieldsConfig): ColumnMapping;
+export declare function detectColumnMapping(headers: string[], fieldsConfig: ImportFieldsConfig, mode?: ImportMode): ColumnMapping;
 /**
  * Validate that all required fields are mapped
  */
@@ -50,7 +53,7 @@ export declare function parseHeaderLine(line: string, delimiter: ',' | ';'): str
 /**
  * Get CSV headers and suggested mapping
  */
-export declare function analyzeCSVHeaders(csvContent: string, fieldsConfig: ImportFieldsConfig): {
+export declare function analyzeCSVHeaders(csvContent: string, fieldsConfig: ImportFieldsConfig, mode?: ImportMode): {
     headers: string[];
     delimiter: ',' | ';';
     suggestedMapping: ColumnMapping;

package/dist/shared/csv-import/column-detector.js

@@ -96,14 +96,21 @@ export function detectFieldType(header) {
 /**
  * Auto-detect column mapping from headers
  * Returns suggested mapping based on alias matching
+ * @param headers - CSV column headers
+ * @param fieldsConfig - Field configuration for the import mode
+ * @param mode - Import mode (used to customize detection behavior)
  */
-export function detectColumnMapping(headers, fieldsConfig) {
+export function detectColumnMapping(headers, fieldsConfig, mode) {
     const mapping = {};
     const usedIndices = new Set();
     // Get all field types we're looking for
     const allFields = [...fieldsConfig.required, ...fieldsConfig.optional];
+    // For point mode, skip auto-detecting ID - default to auto-generated
+    const fieldsToDetect = mode === 'point'
+        ? allFields.filter(f => f.type !== 'id')
+        : allFields;
     // First pass: exact matches and strong matches
-    for (const field of allFields) {
+    for (const field of fieldsToDetect) {
         const aliases = COLUMN_ALIASES[field.type] || [];
         for (let i = 0; i < headers.length; i++) {
             if (usedIndices.has(i))
@@ -118,7 +125,7 @@ export function detectColumnMapping(headers, fieldsConfig) {
         }
     }
     // Second pass: partial matches for unmapped fields
-    for (const field of allFields) {
+    for (const field of fieldsToDetect) {
         if (mapping[field.type] !== undefined)
             continue;
         const aliases = COLUMN_ALIASES[field.type] || [];
@@ -190,7 +197,7 @@ export function detectImportMode(headers) {
 export function autoDetectImport(headers) {
     const mode = detectImportMode(headers);
     const fieldsConfig = getFieldsForMode(mode);
-    const mapping = detectColumnMapping(headers, fieldsConfig);
+    const mapping = detectColumnMapping(headers, fieldsConfig, mode);
     return { mode, mapping, fieldsConfig };
 }
 /**
@@ -211,14 +218,14 @@ export function parseHeaderLine(line, delimiter) {
 /**
  * Get CSV headers and suggested mapping
  */
-export function analyzeCSVHeaders(csvContent, fieldsConfig) {
+export function analyzeCSVHeaders(csvContent, fieldsConfig, mode) {
     const lines = csvContent.trim().split('\n');
     if (lines.length === 0) {
         return { headers: [], delimiter: ',', suggestedMapping: {}, rowCount: 0 };
     }
     const delimiter = detectDelimiter(lines[0]);
     const headers = parseHeaderLine(lines[0], delimiter);
-    const suggestedMapping = detectColumnMapping(headers, fieldsConfig);
+    const suggestedMapping = detectColumnMapping(headers, fieldsConfig, mode);
     return {
         headers,
         delimiter,

package/dist/shared/csv-import/types.js

@@ -9,7 +9,7 @@
 /** Cell mode - ID resolves against existing cell data */
 export const CELL_MODE_FIELDS = {
     required: [
-        { type: 'id', label: 'Cell ID', required: true, description: 'e.g. cellName, txId' }
+        { type: 'id', label: 'txId / (Cell Name) ', required: true, description: 'Column to match against cell data' }
     ],
     optional: [
         { type: 'group', label: 'Group', required: false, description: 'e.g. customGroup, category' },
@@ -19,11 +19,11 @@ export const CELL_MODE_FIELDS = {
 /** Point mode - creates markers at lat/lon coordinates */
 export const POINT_MODE_FIELDS = {
     required: [
-        { type: 'id', label: 'ID / Name', required: true, description: 'e.g. name, label, id' },
         { type: 'lat', label: 'Latitude', required: true, description: 'e.g. lat, latitude, y' },
         { type: 'lon', label: 'Longitude', required: true, description: 'e.g. lon, lng, longitude, x' }
     ],
     optional: [
+        { type: 'id', label: 'Name / ID', required: false, description: 'Optional - auto-generated if not mapped' },
         { type: 'group', label: 'Group', required: false, description: 'e.g. category, type' },
         { type: 'sizeFactor', label: 'Size', required: false, description: 'e.g. size, weight' }
     ]

package/package.json

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