Improve word relationship graph with filters, legend, and performance tuning.

Add status/search filters, link-type toggles, 40-node cap with weak-word priority,
distinct edge styles, and reduced physics cost for large graphs.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/WordGraphCanvas.vue

@@ -31,6 +31,7 @@ let draggingId: string | null = null
 let dragOffsetX = 0
 let dragOffsetY = 0
 let pointerMoved = false
+let frameCount = 0
 
 const statusColor: Record<string, string> = {
   new: '#94a3b8',
@@ -86,8 +87,11 @@ function tick() {
   const centerX = width / 2
   const centerY = height / 2
 
-  for (let i = 0; i < simNodes.length; i++) {
-    for (let j = i + 1; j < simNodes.length; j++) {
+  const heavy = simNodes.length > 35
+  const pairStep = heavy ? 2 : 1
+
+  for (let i = 0; i < simNodes.length; i += pairStep) {
+    for (let j = i + 1; j < simNodes.length; j += pairStep) {
       const a = simNodes[i]
       const b = simNodes[j]
       if (a.id === draggingId || b.id === draggingId) continue
@@ -165,10 +169,21 @@ function draw() {
     ctx.beginPath()
     ctx.moveTo(a.x, a.y)
     ctx.lineTo(b.x, b.y)
-    ctx.strokeStyle =
-      l.kind === 'co_review' ? 'rgba(79,110,247,0.35)' : 'rgba(148,163,184,0.25)'
-    ctx.lineWidth = l.kind === 'co_review' ? 1.5 : 1
+    if (l.kind === 'co_review') {
+      ctx.strokeStyle = 'rgba(79,110,247,0.45)'
+      ctx.lineWidth = 1.5
+      ctx.setLineDash([])
+    } else if (l.kind === 'similar') {
+      ctx.strokeStyle = 'rgba(245,158,11,0.4)'
+      ctx.lineWidth = 1
+      ctx.setLineDash([4, 4])
+    } else {
+      ctx.strokeStyle = 'rgba(148,163,184,0.3)'
+      ctx.lineWidth = 1
+      ctx.setLineDash([2, 3])
+    }
     ctx.stroke()
+    ctx.setLineDash([])
   }
 
   for (const n of simNodes) {
@@ -191,7 +206,10 @@ function draw() {
 }
 
 function loop() {
-  tick()
+  frameCount += 1
+  const heavy = simNodes.length > 35
+  const runPhysics = !heavy || frameCount % 2 === 0 || draggingId !== null
+  if (runPhysics) tick()
   draw()
   animId = requestAnimationFrame(loop)
 }
@@ -200,7 +218,7 @@ function resize() {
   const canvas = canvasRef.value
   if (!canvas?.parentElement) return
   width = canvas.parentElement.clientWidth
-  height = 320
+  height = 360
   canvas.width = width * devicePixelRatio
   canvas.height = height * devicePixelRatio
   canvas.style.width = `${width}px`