Merge branch 'feature_objects_map' into 'main'

feat(map): UX improvements — filter buttons, list sync, overlap popup

See merge request 701/netbox/cesnet_service_path_plugin!60

Author: jirivrany

CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## [6.2.0] - 2026-04-27
+
+### Added
+
+- **Network Map — Tag filters**: Tag filter dropdowns added for Sites, Segments, and Circuits.
+  Filtering uses AND logic — an object must carry all selected tags to match.
+- **Network Map — Object selection highlight**: Clicking a segment, circuit, or site now
+  highlights the selected object on the map in orange. Highlight is restored when another
+  object is selected or the info card is closed.
+- **Network Map — Tag colors in info card**: Tag badges in the detail info card now use the
+  tag's configured color (with automatic light/dark contrast text).
+- **Network Map — Object list panel**: A second "List" tab in the right panel provides a
+  searchable, scrollable list of all visible objects with type toggles and click-to-locate.
+- **Network Map — Filter sidebar**: Permanent right-side filter column replaces the offcanvas
+  sidebar. Includes two "Clear Filters" buttons (top and bottom of the column).
+- **Network Map — Circuit termination details**: Info card shows cable connection, cross-connect
+  ID, port speed, and a "Connect" dropdown button for unconnected terminations.
+
+### Changed
+
+- **Network Map — Status/type filter buttons**: Reverted from `<select multiple>` dropdowns
+  back to btn-check pill buttons following user testing feedback. Button sizing reduced
+  (0.65 rem, 20 px height) using flexbox to eliminate Bootstrap padding asymmetry.
+- **Network Map — Map popup links**: Plain text links in segment, circuit, and site popups
+  replaced with `btn-outline` buttons (View / Map) for better discoverability.
+- **Network Map — Overlap popup**: Added `<hr>` separators between entries and View/Map
+  buttons per segment. Segment names styled as blue links with hover underline and a
+  "Click a name to show details" subtitle.
+- **Network Map — Object list sync**: List type buttons (Sites / Segs / Circs) now mirror
+  the state of the main toolbar visibility toggles. List count and rows update immediately
+  when toolbar toggles change. Circuits list button starts unchecked to match default
+  hidden state.
+- **Network Map — Map height**: Increased to 1000 px for better usability on larger screens.
+- **Network Map — Color palette**: Segment and circuit colors updated to avoid green tones
+  that blend with OSM map background.
+
+### Fixed
+
+- **Network Map — Object list initial count**: List now populates via `applyFilters()` on
+  first load so counts reflect server-side pre-filters (e.g. region in URL) immediately.
+- **Network Map — List visibility respect**: Object list respects layer visibility flags;
+  hidden layers are excluded from the list count and rows.
+- **Network Map — Segment popup midpoint**: When selecting a segment from the list, the
+  popup now anchors to the middle vertex of the actual rendered GeoJSON polyline instead
+  of the midpoint between the two endpoint sites.
+- **Network Map — Clear Filters Tom Select**: Region and other dynamic fields (Tom Select
+  widgets) are now correctly cleared via `sel.tomselect.clear()` / `clearOptions()`.
+- **Network Map — Nav-tabs dark theme**: Switched from `nav-tabs` to `nav-pills` for the
+  Filters / List tab switcher so tab labels are visible in NetBox dark mode.
+- **Network Map — Toggle button padding**: Fixed uneven top/bottom padding on btn-check
+  filter pill buttons caused by Bootstrap `--bs-btn-padding-y` override.
+
+### Compatibility
+
+| cesnet_service_path_plugin | NetBox |
+|---|---|
+| 6.2.x | 4.5.4+ |
+| 6.1.x | 4.5.4+ |
+| 6.0.x | 4.5.0 – 4.5.3 |
+
+---
+
 ## [6.1.1] - 2026-03-19
 
 ### Fixed

README.md

@@ -47,6 +47,7 @@ The CESNET ServicePath Plugin extends NetBox's capabilities by providing compreh
 
 | NetBox Version | Plugin Version | Notes |
 |----------------|----------------|-------|
+|     4.5.4+     |      6.2.x     | Network Map UX overhaul, tag filters, object highlight |
 |     4.5.4+     |      6.1.x     | Requires NetBox >= 4.5.4 (strawberry-graphql-django >= 0.79.0) |
 |   4.5.0–4.5.3  |      6.0.x     | **Breaking change**: Filter system updated, NOT compatible with 4.4.x |
 |     4.4.x      |      5.4.x     | Last version compatible with NetBox 4.4.x |
@@ -133,6 +134,12 @@ The CESNET ServicePath Plugin extends NetBox's capabilities by providing compreh
 - **Fallback visualization** showing straight lines when path data unavailable
 - **Overlapping segment detection** and selection on maps
 - **Path data export** as GeoJSON for external use
+- **Network Map** (new in 6.0.0, enhanced in 6.2.0): combined Sites + Segments + Circuits view
+  - Permanent right-side panel with filter sidebar and searchable object list
+  - Tag filters for Sites, Segments, and Circuits
+  - Object selection highlight — selected object shown in orange on the map
+  - Clickable info card showing full object details including tag colors and circuit termination info
+  - Filter pill buttons for status and type with instant client-side filtering
 - An example of a geographic service path visualized using the plugin:
     ![Sample Service Path Map](./docs/sample_path.png)
 
@@ -196,8 +203,8 @@ Before installing the plugin, ensure you have:
 
 1. **PostgreSQL with PostGIS extension** (version 3.0 or higher recommended)
 2. **System libraries**: GDAL, GEOS, and PROJ runtime binaries
-3. **NetBox 4.5.4 or higher** (for plugin version 6.1.x)
-   - **Important**: Plugin version 6.1.x requires NetBox >= 4.5.4 (ships with strawberry-graphql-django >= 0.79.0)
+3. **NetBox 4.5.4 or higher** (for plugin version 6.2.x)
+   - **Important**: Plugin version 6.2.x requires NetBox >= 4.5.4 (ships with strawberry-graphql-django >= 0.79.0)
    - For NetBox 4.5.0–4.5.3, use plugin version 6.0.x
    - If you're running NetBox 4.4.x, use plugin version 5.4.x or earlier
 
@@ -865,7 +872,7 @@ check_gis_environment()
 
 The plugin adds a **Service Paths** menu with:
 - **Segments** - List and manage network segments with quick Add/Import buttons
-- **Segments Map** - Interactive map view of all segments
+- **Network Map** - Combined interactive map of Sites, Segments, and Circuits
 - **Service Paths** - Manage service path definitions with quick Add/Import buttons
 - **Contract Info** - Manage contracts with versioning support (new in 5.4.0)
 - **Mappings** - Relationship management tools with quick Add/Import buttons

cesnet_service_path_plugin/forms/map.py

@@ -2,6 +2,7 @@
 from dcim.choices import SiteStatusChoices
 from dcim.models import Region, Site, SiteGroup
 from django import forms
+from extras.models import Tag
 from tenancy.models import Tenant
 from utilities.forms.fields import DynamicModelMultipleChoiceField
 
@@ -17,11 +18,11 @@ class MapFilterForm(forms.Form):
 
     Field naming convention:
     - Shared spatial fields: native filterset names (region_id, site_group_id, at_any_site)
-    - Site-specific fields: site_ prefix (site_status, site_tenant_id)
-    - Segment-specific fields: segment_ prefix (segment_status, segment_type, segment_provider_id)
+    - Site-specific fields: site_ prefix (site_status, site_tenant_id, site_tag_id)
+    - Segment-specific fields: segment_ prefix (segment_status, segment_type, segment_provider_id, segment_tag_id)
+    - Circuit-specific fields: circuit_ prefix (circuit_status, circuit_type_id, circuit_provider_id, circuit_tag_id)
 
-    The view's _extract_*_params() helpers strip/remap these prefixes before
-    passing GET params to each filterset.
+    All filtering is performed client-side in object_map.js using the JSON data blob.
     """
 
     # -------------------------------------------------------------------------
@@ -50,13 +51,17 @@ class MapFilterForm(forms.Form):
         choices=SiteStatusChoices,
         required=False,
         label="Status",
-        widget=forms.SelectMultiple(attrs={"class": "form-select form-select-sm", "size": "1"}),
     )
     site_tenant_id = DynamicModelMultipleChoiceField(
         queryset=Tenant.objects.all(),
         required=False,
         label="Tenant",
     )
+    site_tag_id = DynamicModelMultipleChoiceField(
+        queryset=Tag.objects.all(),
+        required=False,
+        label="Tag",
+    )
 
     # -------------------------------------------------------------------------
     # Segment filters
@@ -65,19 +70,22 @@ class MapFilterForm(forms.Form):
         choices=StatusChoices,
         required=False,
         label="Status",
-        widget=forms.SelectMultiple(attrs={"class": "form-select form-select-sm", "size": "1"}),
     )
     segment_type = forms.MultipleChoiceField(
         choices=SegmentTypeChoices,
         required=False,
         label="Type",
-        widget=forms.SelectMultiple(attrs={"class": "form-select form-select-sm", "size": "1"}),
     )
     segment_provider_id = DynamicModelMultipleChoiceField(
         queryset=Provider.objects.all(),
         required=False,
         label="Provider",
     )
+    segment_tag_id = DynamicModelMultipleChoiceField(
+        queryset=Tag.objects.all(),
+        required=False,
+        label="Tag",
+    )
 
     # -------------------------------------------------------------------------
     # Circuit filters
@@ -86,7 +94,6 @@ class MapFilterForm(forms.Form):
         choices=[],          # populated in __init__ to avoid import-time issues
         required=False,
         label="Status",
-        widget=forms.SelectMultiple(attrs={"class": "form-select form-select-sm", "size": "1"}),
     )
     circuit_type_id = DynamicModelMultipleChoiceField(
         queryset=CircuitType.objects.all(),
@@ -98,6 +105,11 @@ class MapFilterForm(forms.Form):
         required=False,
         label="Provider",
     )
+    circuit_tag_id = DynamicModelMultipleChoiceField(
+        queryset=Tag.objects.all(),
+        required=False,
+        label="Tag",
+    )
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)