Closes #701: Option to always show cable/interface labels on edges (#707)

* Added draw termination labels

netbox_topology_views/api/serializers.py

@@ -50,4 +50,4 @@ class PowerFeedCoordinateSerializer(NetBoxModelSerializer):
 class IndividualOptionsSerializer(NetBoxModelSerializer):
     class Meta:
         model = IndividualOptions
-        fields = ("ignore_cable_type", "save_coords", "show_unconnected", "show_cables", "show_logical_connections", "show_single_cable_logical_conns", "show_neighbors", "show_circuit", "show_power", "show_wireless", "group_sites", "group_locations", "group_racks", "group_virtualchassis", "draw_default_layout", "straight_cables", "grid_size", "node_label_items")
+        fields = ("ignore_cable_type", "save_coords", "show_unconnected", "show_cables", "show_logical_connections", "show_single_cable_logical_conns", "show_neighbors", "show_circuit", "show_power", "show_wireless", "group_sites", "group_locations", "group_racks", "group_virtualchassis", "draw_default_layout", "straight_cables", "draw_termination_labels", "grid_size", "node_label_items")

netbox_topology_views/api/views.py

@@ -114,7 +114,7 @@ class ExportTopoToXML(BaseViewSet, ViewSet):
 
         if request.GET:
 
-            filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, grid_size, node_label_items = get_query_settings(request)
+            filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, draw_termination_labels, grid_size, node_label_items = get_query_settings(request)
 
             # Read options from saved filters as NetBox does not handle custom plugin filters
             if "filter_id" in request.GET and request.GET["filter_id"] != '':
@@ -136,7 +136,8 @@ class ExportTopoToXML(BaseViewSet, ViewSet):
                     if group_racks == False and 'group_racks' in saved_filter_params: group_racks = saved_filter_params['group_racks']
                     if group_virtualchassis == False and 'group_virtualchassis' in saved_filter_params: group_virtualchassis = saved_filter_params['group_virtualchassis']
                     if show_neighbors == False and 'show_neighbors' in saved_filter_params: show_neighbors = saved_filter_params['show_neighbors']
-                    if straight_cables == False and 'straight_cables' in saved_filter_params: show_neighbors = saved_filter_params['straight_cables']
+                    if straight_cables == False and 'straight_cables' in saved_filter_params: straight_cables = saved_filter_params['straight_cables']
+                    if draw_termination_labels == False and 'draw_termination_labels' in saved_filter_params: draw_termination_labels = saved_filter_params['draw_termination_labels']
                     if grid_size == 0 and 'grid_size' in saved_filter_params: grid_size = saved_filter_params['grid_size']
                     if node_label_items == () and 'node_label_items' in saved_filter_params: node_label_items = saved_filter_params['node_label_items']
                 except SavedFilter.DoesNotExist: # filter_id not found
@@ -170,6 +171,7 @@ class ExportTopoToXML(BaseViewSet, ViewSet):
                 group_virtualchassis=group_virtualchassis,
                 group_id=group_id,
                 straight_cables=straight_cables,
+                draw_termination_labels=draw_termination_labels,
                 grid_size=grid_size,
                 node_label_items=node_label_items,
             )

netbox_topology_views/forms.py

@@ -37,7 +37,7 @@ class DeviceFilterForm(
         FieldSet(
             'group', 'ignore_cable_type', 'save_coords', 'show_unconnected', 'show_cables', 'show_wireless',
             'show_logical_connections', 'show_single_cable_logical_conns', 'show_neighbors',
-            'group_sites', 'group_locations', 'group_racks', 'group_virtualchassis', 'straight_cables', 'grid_size', 'node_label_items', name=_("Options")
+            'group_sites', 'group_locations', 'group_racks', 'group_virtualchassis', 'straight_cables', 'draw_termination_labels', 'grid_size', 'node_label_items', name=_("Options")
         ),
         FieldSet(
             'show_circuit', 'show_power', name=_("Additional filter-independent types (non-devices)")
@@ -318,6 +318,12 @@ class DeviceFilterForm(
             choices=BOOLEAN_WITH_BLANK_CHOICES
         )
     )
+    draw_termination_labels = forms.BooleanField(
+        label=_('Termination Labels'), required=False, initial=False,
+        widget=forms.Select(
+            choices=BOOLEAN_WITH_BLANK_CHOICES
+        )
+    )
     grid_size = forms.IntegerField(
         label=_('Grid Size'),
         required=False,
@@ -538,6 +544,7 @@ class IndividualOptionsForm(NetBoxModelForm):
                 'group_virtualchassis',
                 'draw_default_layout',
                 'straight_cables',
+                'draw_termination_labels',
                 'grid_size',
                 'node_label_items',
             ),
@@ -672,6 +679,13 @@ class IndividualOptionsForm(NetBoxModelForm):
         help_text=_('Enable this option if you want to draw cables as straight lines '
                     'instead of curves.')
     )
+    draw_termination_labels = forms.BooleanField(
+        label=('Termination Labels'),
+        required=False,
+        initial=False,
+        help_text=_('Enable this option if you want to draw a label on each '
+                    'cable end.')
+    )
     grid_size = forms.IntegerField(
         label=_('Grid Size'),
         required=True,
@@ -713,6 +727,6 @@ class IndividualOptionsForm(NetBoxModelForm):
             'save_coords', 'show_unconnected', 'show_cables', 'show_wireless',
             'show_logical_connections', 'show_single_cable_logical_conns', 'show_neighbors',
             'group_sites', 'group_locations', 'group_racks', 'group_virtualchassis',
-            'draw_default_layout', 'straight_cables', 'grid_size', 'node_label_items', 
+            'draw_default_layout', 'straight_cables', 'draw_termination_labels', 'grid_size', 'node_label_items', 
             'show_circuit', 'show_power'
         ]

netbox_topology_views/migrations/0012_individualoptions_draw_termination_labels.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.9 on 2026-02-19 18:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('netbox_topology_views', '0011_individualoptions_node_label_items'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualoptions',
+            name='draw_termination_labels',
+            field=models.BooleanField(default=False),
+        ),
+    ]

netbox_topology_views/models.py

@@ -405,6 +405,9 @@ class IndividualOptions(NetBoxModel):
     straight_cables = models.BooleanField(
         default=False
     )
+    draw_termination_labels = models.BooleanField(
+        default=False
+    )
     grid_size = models.PositiveSmallIntegerField(
         default=0
     )

netbox_topology_views/static_dev/js/home.js

@@ -1,6 +1,44 @@
 import { DataSet } from 'vis-data/esnext'
 import { Network } from 'vis-network/esnext'
 
+function generatePortSVG(text) {
+    // pre-calculate text width
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
+    const fontFamily = 'helvetica';
+    const fontSize = 14;
+    textEl.textContent = text;
+    textEl.setAttribute('font-family', fontFamily);
+    textEl.setAttribute('font-size', fontSize + 'px');
+    svg.appendChild(textEl);
+    document.body.appendChild(svg);
+
+    const textWidth = textEl.getComputedTextLength();
+    textEl.remove();
+    svg.remove();
+
+    const rectPadding = 2;
+    const rectBorderWidth = 2;
+    const rectX = rectBorderWidth / 2;
+    const rectY = rectBorderWidth / 2;
+    const rectWidth = textWidth + rectBorderWidth + rectPadding * 2;
+    const rectHeight = fontSize + rectBorderWidth + rectPadding * 2;
+    const svgHeight = rectHeight + rectY + rectBorderWidth / 2;
+    const svgWidth = rectWidth + rectX + rectBorderWidth / 2;
+    const textX = svgWidth / 2 ;
+    const textY = svgHeight / 2;
+
+    // generate SVG
+	return 'data:image/svg+xml;charset=utf-8,' + 
+    encodeURIComponent( 
+        '<svg xmlns="http://www.w3.org/2000/svg" width="' + (svgWidth) + '" height="' + (svgHeight) + '">' +
+        '<rect x="' + rectX + '" y="' + rectY + '" rx="4" ry="4" width="' + (rectWidth) + '" height="' + (rectHeight) + '" fill="#ffdf3f" stroke="#ffc93f" stroke-width="' + (rectBorderWidth) + '" style="opacity:0.5"/>' +
+        '<text x="' + textX + '" y="' + textY + '" font-family="' + fontFamily + '" font-size="' + (fontSize) + '" fill="black" text-anchor="middle" dominant-baseline="middle">' + text + '</text>' +
+        '</svg>'
+        )
+}
+
 const options = {
     interaction: {
         hover: true,
@@ -62,7 +100,21 @@ const coordSaveCheckbox = document.querySelector('#id_save_coords')
     const edges = new DataSet(
         topologyData.edges.map((node) => ({
             ...node,
-            title: htmlTitle(node.title)
+            title: htmlTitle(node.title),
+            ...(node.drawTerminationLabel && {
+                arrows: {
+                    from: {
+                        enabled: true,
+                        type: "image",
+                        src: generatePortSVG(node.cable_a_name)
+                    },
+                    to: {
+                        enabled: true,
+                        type: "image",
+                        src: generatePortSVG(node.cable_b_name)
+                    }
+                }
+            })
         }))
     )
 

netbox_topology_views/static_dev/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "netbox_topology_views",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "netbox_topology_views",
-      "version": "4.3.0",
+      "version": "4.5.0",
       "dependencies": {
         "vis-data": "^7.1.9",
         "vis-network": "^9.1.9",

netbox_topology_views/utils.py

@@ -196,6 +196,11 @@ def get_query_settings(request):
         if request.GET["straight_cables"] == "True":
             straight_cables = True
 
+    draw_termination_labels = False
+    if "draw_termination_labels" in request.GET:
+        if request.GET["draw_termination_labels"] == "True":
+            draw_termination_labels = True
+
     grid_size = 0
     if "grid_size" in request.GET:
         grid_size = request.GET.getlist('grid_size')
@@ -204,7 +209,7 @@ def get_query_settings(request):
     if "node_label_items" in request.GET:
         node_label_items = request.GET.getlist('node_label_items')
 
-    return filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, grid_size, node_label_items
+    return filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, draw_termination_labels, grid_size, node_label_items
 
 class LinePattern():
     wireless = [2, 10, 2, 10]

netbox_topology_views/views.py

@@ -269,6 +269,7 @@ def create_edge(
     termination_a: Dict,
     termination_b: Dict,
     straight_cables: bool,
+    draw_termination_labels: bool,
     circuit: Optional[Dict] = None,
     cable: Optional[Cable] = None,
     wireless: Optional[Dict] = None,
@@ -339,6 +340,12 @@ def create_edge(
     # if straight_cables == True: edge["smooth"] = False
     edge["smooth"] = not straight_cables
 
+    if draw_termination_labels is True:
+        edge["drawTerminationLabel"] = True
+        edge["cable_a_name"] = cable_a_name
+        edge["cable_b_name"] = cable_b_name
+
+
     return edge
 
 
@@ -381,6 +388,7 @@ def get_topology_data(
     group_virtualchassis: bool,
     group_id,
     straight_cables: bool,
+    draw_termination_labels: bool,
     grid_size: list,
     node_label_items: list,
 ):
@@ -479,6 +487,7 @@ def get_topology_data(
                         termination_a=termination_a,
                         termination_b=termination_b,
                         straight_cables=straight_cables,
+                        draw_termination_labels=draw_termination_labels,
                     )
                 )
 
@@ -549,6 +558,7 @@ def get_topology_data(
                         termination_b=termination_b,
                         power=True,
                         straight_cables=straight_cables,
+                        draw_termination_labels=draw_termination_labels,
                     )
                 )
 
@@ -587,7 +597,7 @@ def get_topology_data(
                     edge_ids += 1
                     termination_a = { "termination_name": interface.name, "termination_device_name": interface.device.name, "device_id": interface.device.id }
                     termination_b = { "termination_name": destination.name, "termination_device_name": destination.device.name, "device_id": destination.device.id }
-                    edges.append(create_edge(edge_id=edge_ids, termination_a=termination_a, termination_b=termination_b, interface=interface, straight_cables=straight_cables))
+                    edges.append(create_edge(edge_id=edge_ids, termination_a=termination_a, termination_b=termination_b, interface=interface, straight_cables=straight_cables, draw_termination_labels=draw_termination_labels))
                     nodes_devices[interface.device.id] = interface.device
                     nodes_devices[destination.device.id] = destination.device
 
@@ -668,6 +678,7 @@ def get_topology_data(
                             termination_a=termination_a,
                             termination_b=termination_b,
                             straight_cables=straight_cables,
+                            draw_termination_labels=draw_termination_labels,
                         )
                     )
 
@@ -708,6 +719,7 @@ def get_topology_data(
                     termination_b=termination_b,
                     wireless=wireless,
                     straight_cables=straight_cables,
+                    draw_termination_labels=draw_termination_labels,
                 )
             )
 
@@ -762,7 +774,7 @@ class TopologyHomeView(PermissionRequiredMixin, View):
 
         if request.GET:
 
-            filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, grid_size, node_label_items = get_query_settings(request)
+            filter_id, ignore_cable_type, save_coords, show_unconnected, show_power, show_circuit, show_logical_connections, show_single_cable_logical_conns, show_cables, show_wireless, group_sites, group_locations, group_racks, group_virtualchassis, group, show_neighbors, straight_cables, draw_termination_labels, grid_size, node_label_items = get_query_settings(request)
             
             filter_required = True
             empty_result = False
@@ -788,6 +800,7 @@ class TopologyHomeView(PermissionRequiredMixin, View):
                     if group_virtualchassis == False and 'group_virtualchassis' in saved_filter_params: group_virtualchassis = saved_filter_params['group_virtualchassis']
                     if show_neighbors == False and 'show_neighbors' in saved_filter_params: show_neighbors = saved_filter_params['show_neighbors']
                     if straight_cables == False and 'straight_cables' in saved_filter_params: straight_cables = saved_filter_params['straight_cables']
+                    if draw_termination_labels == False and 'draw_termination_labels' in saved_filter_params: draw_termination_labels = saved_filter_params['draw_termination_labels']
                     if grid_size == 0 and 'grid_size' in saved_filter_params: grid_size = saved_filter_params['grid_size']
                     if node_label_items == () and 'node_label_items' in saved_filter_params: node_label_items = saved_filter_params['node_label_items']
                 except SavedFilter.DoesNotExist: # filter_id not found
@@ -825,6 +838,7 @@ class TopologyHomeView(PermissionRequiredMixin, View):
                     group_virtualchassis=group_virtualchassis,
                     group_id=group_id,
                     straight_cables=straight_cables,
+                    draw_termination_labels=draw_termination_labels,
                     grid_size=grid_size,
                     node_label_items=node_label_items,
                 )
@@ -858,6 +872,7 @@ class TopologyHomeView(PermissionRequiredMixin, View):
             if individualOptions.group_racks: q['group_racks'] = "True"
             if individualOptions.group_virtualchassis: q['group_virtualchassis'] = "True"
             if individualOptions.straight_cables: q['straight_cables'] = "True"
+            if individualOptions.draw_termination_labels: q['draw_termination_labels'] = "True"
             if individualOptions.grid_size: q['grid_size'] = individualOptions.grid_size
             node_label_items = IndividualOptions.objects.get(id=individualOptions.id).node_label_items.translate({ord(i): None for i in '[]\''}).split(', ')
             if node_label_items == ['']: node_label_items = []
@@ -1211,6 +1226,7 @@ class TopologyIndividualOptionsView(PermissionRequiredMixin, View):
                 'group_virtualchassis': queryset.group_virtualchassis,
                 'draw_default_layout': queryset.draw_default_layout,
                 'straight_cables': queryset.straight_cables,
+                'draw_termination_labels': queryset.draw_termination_labels,
                 'grid_size': queryset.grid_size,
                 'node_label_items': tuple(queryset.node_label_items.translate({ord(i): None for i in '[]\''}).split(', ')),
             },