commit

Author: Anchel123

app/components/graphView.tsx

@@ -232,7 +232,7 @@ export default function GraphView({
                     if (!start.x || !start.y || !end.x || !end.y) return
 
                     let textX, textY, angle;
-                    
+
                     if (start.id === end.id) {
                         const radius = NODE_SIZE * link.curve * 6.2;
                         const angleOffset = -Math.PI / 4; // 45 degrees offset for text alignment
@@ -243,9 +243,9 @@ export default function GraphView({
                         const midX = (start.x + end.x) / 2;
                         const midY = (start.y + end.y) / 2;
                         const offset = link.curve / 2;
-                        
+
                         angle = Math.atan2(end.y - start.y, end.x - start.x);
-                        
+
                         // maintain label vertical orientation for legibility
                         if (angle > Math.PI / 2) angle = -(Math.PI - angle);
                         if (angle < -Math.PI / 2) angle = -(-Math.PI - angle);
@@ -265,20 +265,31 @@ export default function GraphView({
                         textY = rotatedY;
                     }
 
+                    // Get text width
+                    const label = graph.LabelsMap.get(link.label)!
+                    let { textWidth } = label
+
+                    if (!textWidth) {
+                        textWidth = ctx.measureText(link.label).width;
+                        graph.LabelsMap.set(link.label, { ...label, textWidth })
+                    }
+
                     // Setup text properties to measure background size
                     ctx.font = '2px Arial';
                     const padding = 0.5;
-                    const textWidth = ctx.measureText(link.label).width;
                     const textHeight = 2; // Approximate height for 2px font
 
+                    // Save the current context state
+                    ctx.save();
+
                     // add label with background and rotation
                     ctx.rotate(angle);
-                    
+
                     // Draw background
                     ctx.fillStyle = 'white';
                     ctx.fillRect(
-                        textX - textWidth/2 - padding,
-                        textY - textHeight/2 - padding,
+                        textX - textWidth / 2 - padding,
+                        textY - textHeight / 2 - padding,
                         textWidth + padding * 2,
                         textHeight + padding * 2
                     );
@@ -289,8 +300,8 @@ export default function GraphView({
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
                     ctx.fillText(link.label, textX, textY);
-                    
-                    ctx.rotate(-angle); // reset rotation
+
+                    ctx.restore(); // reset rotation
                 }}
                 onNodeClick={handleNodeClick}
                 onNodeDragEnd={(n, translate) => setPosition(prev => {

app/components/model.ts

@@ -11,6 +11,11 @@ export interface Category {
   show: boolean,
 }
 
+export interface Label {
+  name: string,
+  textWidth: number,
+}
+
 export type Node = NodeObject<{
   id: number,
   name: string,
@@ -62,18 +67,21 @@ export class Graph {
 
   private id: string;
   private categories: Category[];
+  private labels: Label[];
   private elements: GraphData;
-
   private categoriesMap: Map<string, Category>;
+  private labelsMap: Map<string, Label>;
   private nodesMap: Map<number, Node>;
   private linksMap: Map<number, Link>;
 
-  private constructor(id: string, categories: Category[], elements: GraphData,
-    categoriesMap: Map<string, Category>, nodesMap: Map<number, Node>, edgesMap: Map<number, Link>) {
+  private constructor(id: string, categories: Category[], labels: Label[], elements: GraphData,
+    categoriesMap: Map<string, Category>, labelsMap: Map<string, Label>, nodesMap: Map<number, Node>, edgesMap: Map<number, Link>) {
     this.id = id;
     this.categories = categories;
+    this.labels = labels;
     this.elements = elements;
     this.categoriesMap = categoriesMap;
+    this.labelsMap = labelsMap;
     this.nodesMap = nodesMap;
     this.linksMap = edgesMap;
   }
@@ -90,6 +98,14 @@ export class Graph {
     return this.categoriesMap;
   }
 
+  get Labels(): Label[] {
+    return this.labels;
+  }
+
+  get LabelsMap(): Map<string, Label> {
+    return this.labelsMap;
+  }
+
   get Elements(): GraphData {
     return this.elements;
   }
@@ -111,7 +127,7 @@ export class Graph {
   }
 
   public static empty(): Graph {
-    return new Graph("", [], { nodes: [], links: [] }, new Map<string, Category>(), new Map<number, Node>(), new Map<number, Link>())
+    return new Graph("", [], [], { nodes: [], links: [] }, new Map<string, Category>(), new Map<string, Label>(), new Map<number, Node>(), new Map<number, Link>())
   }
 
   public static create(results: any, graphName: string): Graph {
@@ -207,6 +223,13 @@ export class Graph {
         this.nodesMap.set(edgeData.dest_node, target)
       }
 
+      let label = this.labelsMap.get(edgeData.relation)
+      if (!label) {
+        label = { name: edgeData.relation, textWidth: 0 }
+        this.labelsMap.set(edgeData.relation, label)
+        this.labels.push(label)
+      }
+
       link = {
         id: edgeData.id,
         source,