add support for displaying link types

Author: zyansheep

core/frontend/graph.js

@@ -87,6 +87,23 @@ simulation.on('tick', function () {
     .attr('y1', (d) => d.source.y)
     .attr('x2', (d) => d.target.x)
     .attr('y2', (d) => d.target.y);
+  
+  elts.linkLabels
+    .attr("x", (d) => (d.source.x + d.target.x) / 2)
+    .attr("y", (d) => (d.source.y + d.target.y) / 2)
+    .attr("text-anchor", "middle")
+    .attr("transform", d => {
+      var angle = Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI;
+
+      // Adjust angle to avoid upside-down text
+      if (angle > 90 || angle < -90) {
+        angle = (angle + 180) % 360;
+      }
+      
+      var x = (d.source.x + d.target.x) / 2;
+      var y = (d.source.y + d.target.y) / 2;
+      return `rotate(${angle},${x},${y})`;
+    });
 
   elts.nodes.attr('transform', (d) => 'translate(' + d.x + ',' + d.y + ')');
 
@@ -130,6 +147,15 @@ if (graphProperties.graph_arrows === true) {
   elts.links.attr('marker-end', 'url(#arrow)');
 }
 
+elts.linkLabels = svgSub
+  .append('g')
+  .selectAll("text")
+  .data(data.edges)
+  .enter()
+  .append("text")
+  .attr('font-size', graphProperties.graph_text_size)
+  .text(d => d.attributes.type); // Assuming each link has a label
+
 const strokeWidth = 2;
 
 /** @type {d3.Selection<SVGGElement, Node, SVGElement, any>} */
@@ -493,6 +519,14 @@ window.labelDisplayToggle = function (isChecked) {
   }
 };
 
+window.linkLabelDisplayToggle = function (isChecked) {
+  if (isChecked) {
+    elts.linkLabels.style('display', null);
+  } else {
+    elts.linkLabels.style('display', 'none');
+  }
+};
+
 /**
  * Change the font size of graph labels
  */

core/i18n.yml

@@ -81,6 +81,9 @@ left_panel:
     input_labels_show:
       fr: Afficher les étiquettes
       en: Display labels
+    input_link_labels_show:
+      fr: Afficher les étiquettes liens
+      en: Display link labels
     input_highlight_hover_node:
       fr: Surbrillance au survol
       en: Highlight on hover

static/template/cosmoscope.njk

@@ -176,6 +176,12 @@
                         {{ translation.left_panel.menu_controls.input_labels_show[lang] }}
                     </label>
                 </li>
+                <li>
+                    <label>
+                        <input type="checkbox" checked onchange="linkLabelDisplayToggle(this.checked)">
+                        {{ translation.left_panel.menu_controls.input_link_labels_show[lang] }}
+                    </label>
+                </li>
                 <li>
                     <label>
                         <input type="checkbox" {{ "checked" if graph.config.graph_highlight_on_hover }}