Skip to content

Commit 80b6072

Browse files
jirivranyjirivrany
committed
feat(segments-map): add segment type coloring and legend to map view
1 parent ba2c5d0 commit 80b6072

File tree

2 files changed

+57
-21
lines changed

2 files changed

+57
-21
lines changed

‎cesnet_service_path_plugin/templates/cesnet_service_path_plugin/segments_map.html‎

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h5 class="card-title mb-0">
7373
<i class="mdi mdi-table" aria-hidden="true"></i> Table View
7474
</a>
7575

76-
<!-- Color Scheme Selector -->
76+
<!-- Color Scheme Selector -->
7777
<div class="btn-group ms-2" role="group">
7878
<button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="colorSchemeButton">
7979
<i class="mdi mdi-palette" aria-hidden="true"></i> <span id="currentColorScheme">Status</span>
@@ -85,6 +85,9 @@ <h5 class="card-title mb-0">
8585
<li><a class="dropdown-item" href="#" data-scheme="provider">
8686
<i class="mdi mdi-circle-medium" style="color: #e74c3c;"></i> By Provider
8787
</a></li>
88+
<li><a class="dropdown-item" href="#" data-scheme="segment_type">
89+
<i class="mdi mdi-circle-medium" style="color: #9c27b0;"></i> By Segment Type
90+
</a></li>
8891
</ul>
8992
</div>
9093

@@ -162,20 +165,20 @@ <h6 class="card-title mb-0">Selected Segment</h6>
162165
const mapBounds = mapData.mapBounds;
163166
const mapCenter = mapData.mapCenter;
164167
const apiUrl = mapData.apiUrl;
165-
168+
166169
// Create map
167170
const map = L.map('map').setView([mapCenter.lat, mapCenter.lng], mapCenter.zoom);
168-
171+
169172
// Initialize layers using common function
170173
initializeMapLayers(map);
171-
174+
172175
// Layer groups for different types
173176
const pathLayers = L.layerGroup().addTo(map);
174177
const siteLayers = L.layerGroup().addTo(map);
175-
178+
176179
// Color schemes
177180
let currentColorScheme = 'status';
178-
181+
179182
// Status color mapping
180183
const statusColorsLine = {
181184
"Active": "#198754", // Dark Green
@@ -194,7 +197,14 @@ <h6 class="card-title mb-0">Selected Segment</h6>
194197

195198
// Provider color mapping - generate colors dynamically
196199
const providerColors = {};
197-
200+
201+
// NEW: Segment type color mapping
202+
const segmentTypeColors = {
203+
"Dark Fiber": "#9c27b0", // Purple (matches your SegmentTypeChoices)
204+
"Optical Spectrum": "#ff9800", // Orange (matches your SegmentTypeChoices)
205+
"Ethernet Service": "#4caf50" // Green (matches your SegmentTypeChoices)
206+
};
207+
198208
// Generate color palette for providers
199209
const colorPalette = [
200210
'#d32f2f', // strong red
@@ -217,33 +227,34 @@ <h6 class="card-title mb-0">Selected Segment</h6>
217227
'#0d47a1', // navy blue
218228
'#ad1457', // dark pink
219229
'#4a148c' // very dark purple
220-
];
221-
222-
230+
];
231+
223232
// Build provider color mappings from segments data
224233
function buildProviderColors() {
225234
const uniqueProviders = [...new Set(segmentsData.map(s => s.provider).filter(p => p))];
226235
uniqueProviders.forEach((provider, index) => {
227236
providerColors[provider] = colorPalette[index % colorPalette.length];
228237
});
229238
}
230-
239+
231240
// Initialize provider colors
232241
buildProviderColors();
233242

234243
// Store all segments with their layers
235244
let segmentLayers = new Map(); // segmentId -> layer
236-
245+
237246
// Function to get segment color based on current scheme
238247
function getSegmentColor(segment) {
239248
if (currentColorScheme === 'status') {
240249
return statusColorsLine[segment.status] || '#dc3545';
241250
} else if (currentColorScheme === 'provider') {
242251
return providerColors[segment.provider] || '#6c757d';
252+
} else if (currentColorScheme === 'segment_type') {
253+
return segmentTypeColors[segment.segment_type] || '#6c757d';
243254
}
244255
return '#dc3545';
245256
}
246-
257+
247258
// Function to get status badge color
248259
function getStatusBadgeColor(segment) {
249260
return statusBadge[segment.status] || 'secondary';
@@ -255,7 +266,7 @@ <h6 class="card-title mb-0">Selected Segment</h6>
255266
? '<span class="badge text-bg-success">Has Path Data</span>'
256267
: '<span class="badge text-bg-warning">No Path Data</span>';
257268
}
258-
269+
259270
// Function to update legend based on current color scheme
260271
function updateLegend() {
261272
const legendDropdown = document.getElementById('legendDropdown');
@@ -281,6 +292,16 @@ <h6 class="card-title mb-0">Selected Segment</h6>
281292
</span>`;
282293
legendDropdown.appendChild(li);
283294
});
295+
} else if (currentColorScheme === 'segment_type') {
296+
// NEW: Segment type legend
297+
Object.entries(segmentTypeColors).forEach(([segmentType, color]) => {
298+
const li = document.createElement('li');
299+
li.innerHTML = `<span class="dropdown-item-text small">
300+
<span style="display: inline-block; width: 20px; height: 3px; background-color: ${color}; margin-right: 8px;"></span>
301+
${segmentType}
302+
</span>`;
303+
legendDropdown.appendChild(li);
304+
});
284305
}
285306

286307
// Add common legend items
@@ -295,21 +316,28 @@ <h6 class="card-title mb-0">Selected Segment</h6>
295316
</span>`;
296317
legendDropdown.appendChild(pathInfo);
297318
}
298-
319+
299320
// Function to switch color scheme
300321
function switchColorScheme(scheme) {
301322
currentColorScheme = scheme;
302323

303324
// Update button text
304325
const schemeButton = document.getElementById('currentColorScheme');
305-
schemeButton.textContent = scheme === 'status' ? 'Status' : 'Provider';
326+
if (scheme === 'status') {
327+
schemeButton.textContent = 'Status';
328+
} else if (scheme === 'provider') {
329+
schemeButton.textContent = 'Provider';
330+
} else if (scheme === 'segment_type') {
331+
schemeButton.textContent = 'Segment Type';
332+
}
306333

307334
// Update legend
308335
updateLegend();
309336

310337
// Reload segments with new colors
311338
loadSegmentsWithOverlapHandling();
312339
}
340+
313341

314342
// Function to show segment info in the info panel under the map
315343
function showSegmentInfo(segment) {
@@ -756,13 +784,13 @@ <h4><i class="mdi mdi-layers"></i> Multiple Segments (${overlappingLayers.length
756784
});
757785
});
758786
});
759-
787+
760788
// Initialize layer switching functionality
761789
initializeLayerSwitching(map);
762-
790+
763791
// Initialize legend
764792
updateLegend();
765-
793+
766794
// Load segments on page load with overlap handling
767795
loadSegmentsWithOverlapHandling();
768796
</script>

‎cesnet_service_path_plugin/views/segment.py‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,9 +268,12 @@ def get_extra_context(self, request):
268268
"id": segment.pk,
269269
"name": segment.name,
270270
"provider": str(segment.provider) if segment.provider else None,
271-
"provider_id": segment.provider.pk if segment.provider else None, # NEW: Add provider ID
271+
"provider_id": segment.provider.pk if segment.provider else None,
272272
"status": segment.get_status_display(),
273273
"status_color": segment.get_status_color(),
274+
# NEW: Add segment type information
275+
"segment_type": segment.get_segment_type_display(),
276+
"segment_type_color": segment.get_segment_type_color(),
274277
"path_length_km": float(segment.path_length_km) if segment.path_length_km else None,
275278
"site_a": site_a_data,
276279
"site_b": site_b_data,
@@ -320,7 +323,6 @@ def get_extra_context(self, request):
320323
return context
321324

322325

323-
# Keep your existing function-based API view
324326
def segments_map_api(request):
325327
"""
326328
API endpoint to return filtered segments as GeoJSON for map display
@@ -354,6 +356,9 @@ def segments_map_api(request):
354356
"provider": str(segment.provider) if segment.provider else None,
355357
"status": segment.get_status_display(),
356358
"status_color": segment.get_status_color(),
359+
# NEW: Add segment type information
360+
"segment_type": segment.get_segment_type_display(),
361+
"segment_type_color": segment.get_segment_type_color(),
357362
"path_length_km": float(segment.path_length_km) if segment.path_length_km else None,
358363
"site_a": str(segment.site_a),
359364
"site_b": str(segment.site_b),
@@ -386,6 +391,9 @@ def segments_map_api(request):
386391
"provider": str(segment.provider) if segment.provider else None,
387392
"status": segment.get_status_display(),
388393
"status_color": segment.get_status_color(),
394+
# NEW: Add segment type information
395+
"segment_type": segment.get_segment_type_display(),
396+
"segment_type_color": segment.get_segment_type_color(),
389397
"path_length_km": float(segment.path_length_km) if segment.path_length_km else None,
390398
"site_a": str(segment.site_a),
391399
"site_b": str(segment.site_b),

0 commit comments

Comments
 (0)