@andespindola/brainlink 0.1.0-beta.79 → 0.1.0-beta.80

package/README.md

@@ -82,6 +82,7 @@ Legacy `.jsonl.gz` packs are upgraded to `.blpk` automatically on first search/c
 - Local HTTP API.
 - Realtime graph UI with agent selector and colored knowledge groups.
 - Graph renderer optimized for large datasets with viewport-driven node culling and edge lookup by visible nodes.
+- Large graph canvas rendering batches regular nodes and edges to reduce per-frame draw calls while keeping selected and hovered items highlighted.
 - Large graph layout API automatically uses compact payload encoding with link-coverage-aware edge selection to reduce initial client load without hiding major relationships.
 - Large-segment layout spacing now grows logarithmically to keep initial visual density consistent between medium and very large vaults (for example, ~1k vs ~50k notes).
 - Zoomed-out graph LOD clusters dense regions and progressively expands the focused viewport as zoom increases, including very large vaults.
@@ -594,7 +595,7 @@ The graph UI shows:
 - keyboard shortcuts: `+` zoom in, `-` zoom out, `0` reset fit
 - double-click on canvas zooms in at cursor position
 - floating graph totals (notes, links, tags) below the Brainlink title
-- large-graph rendering safeguards (edge draw caps, lower redraw rate, zoom-aware interaction)
+- large-graph rendering safeguards (batched canvas drawing, edge draw caps, lower redraw rate, zoom-aware interaction)
 - massive-graph LOD progression: very low zoom uses spatial overview sampling plus hub-neighborhood edge previews to preserve whole-vault shape and orientation, then progressively raises the focused node budget as zoom increases so dense local areas keep nearby notes and links visible
 
 The server indexes before starting by default. Use `--no-index` to skip that step:

package/dist/application/frontend/client-js.js

@@ -914,7 +914,58 @@ const drawGraphEdge = (edge) => {
   ctx.stroke()
 }
 
+const drawEdgeBatch = (edges, options) => {
+  if (edges.length === 0) {
+    return
+  }
+
+  ctx.beginPath()
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+  }
+  ctx.strokeStyle = options.strokeStyle
+  ctx.lineWidth = options.lineWidth
+  ctx.stroke()
+}
+
 const drawGraphEdges = () => {
+  if (state.nodes.length > largeGraphNodeThreshold) {
+    const regularEdges = []
+    const inferredEdges = []
+    const selectedEdges = []
+
+    for (let index = 0; index < state.renderEdges.length; index += 1) {
+      const edge = state.renderEdges[index]
+      const isSelected = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+      if (isSelected) {
+        selectedEdges.push(edge)
+      } else if (edge.inferred) {
+        inferredEdges.push(edge)
+      } else {
+        regularEdges.push(edge)
+      }
+    }
+
+    const scale = state.transform.scale
+    const regularOpacity = edgeOpacityForScale({ inferred: false }, scale)
+    const inferredOpacity = edgeOpacityForScale({ inferred: true }, scale)
+    drawEdgeBatch(regularEdges, {
+      strokeStyle: 'rgba(153, 165, 181, ' + regularOpacity + ')',
+      lineWidth: 1.05
+    })
+    drawEdgeBatch(inferredEdges, {
+      strokeStyle: 'rgba(203, 213, 225, ' + inferredOpacity + ')',
+      lineWidth: 0.84
+    })
+
+    for (let index = 0; index < selectedEdges.length; index += 1) {
+      drawGraphEdge(selectedEdges[index])
+    }
+    return
+  }
+
   const selectedEdges = []
   const regularEdges = []
   for (let index = 0; index < state.renderEdges.length; index += 1) {
@@ -935,6 +986,105 @@ const drawGraphEdges = () => {
   }
 }
 
+const shouldDrawNodeLabels = (node, isSelected, isHovered) =>
+  isSelected ||
+  isHovered ||
+  (state.nodes.length > largeGraphNodeThreshold && state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) ||
+  (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
+
+const drawSingleNode = (node, options = { drawLabel: true }) => {
+  const radius = nodeRadius(node)
+  const isSelected = state.selected?.id === node.id
+  const isHovered = state.hovered?.id === node.id
+  ctx.beginPath()
+  ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
+  ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
+  ctx.fill()
+  ctx.beginPath()
+  ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
+  ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
+  ctx.fill()
+  ctx.lineWidth = isSelected ? 2.6 : 1.5
+  ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
+  ctx.stroke()
+
+  if (options.drawLabel && shouldDrawNodeLabels(node, isSelected, isHovered)) {
+    ctx.fillStyle = graphTheme.label
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'top'
+    ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
+  }
+}
+
+const drawNodeBatch = (nodes) => {
+  if (nodes.length === 0) {
+    return
+  }
+
+  const drawHalos = state.renderNodes.length <= 1200 || state.transform.scale >= 0.45
+  if (drawHalos) {
+    ctx.beginPath()
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index]
+      ctx.moveTo(node.x + nodeRadius(node) + 3, node.y)
+      ctx.arc(node.x, node.y, nodeRadius(node) + 3, 0, Math.PI * 2)
+    }
+    ctx.fillStyle = graphTheme.nodeHalo
+    ctx.fill()
+  }
+
+  ctx.beginPath()
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const radius = nodeRadius(node)
+    ctx.moveTo(node.x + radius, node.y)
+    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
+  }
+  ctx.fillStyle = graphTheme.node
+  ctx.fill()
+  ctx.lineWidth = 1.25
+  ctx.strokeStyle = graphTheme.nodeStroke
+  ctx.stroke()
+}
+
+const drawGraphNodes = () => {
+  if (state.nodes.length <= largeGraphNodeThreshold) {
+    state.renderNodes.forEach(node => drawSingleNode(node))
+    return
+  }
+
+  const regularNodes = []
+  const priorityNodes = []
+
+  for (let index = 0; index < state.renderNodes.length; index += 1) {
+    const node = state.renderNodes[index]
+    const isPriority =
+      state.selected?.id === node.id ||
+      state.hovered?.id === node.id
+    if (isPriority) {
+      priorityNodes.push(node)
+    } else {
+      regularNodes.push(node)
+    }
+  }
+
+  drawNodeBatch(regularNodes)
+
+  if (state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) {
+    ctx.fillStyle = graphTheme.label
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'top'
+    for (let index = 0; index < regularNodes.length; index += 1) {
+      const node = regularNodes[index]
+      ctx.fillText(node.title.slice(0, 34), node.x, node.y + nodeRadius(node) + 8)
+    }
+  }
+
+  priorityNodes.forEach(node => drawSingleNode(node))
+}
+
 const edgePairKey = (source, target) =>
   source < target ? source + '|' + target : target + '|' + source
 
@@ -2203,35 +2353,7 @@ const render = now => {
       // Keep cluster markers minimal and faster to draw on large graphs.
     })
   } else {
-    state.renderNodes.forEach(node => {
-    const radius = nodeRadius(node)
-    const isSelected = state.selected?.id === node.id
-    const isHovered = state.hovered?.id === node.id
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
-    ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
-    ctx.fill()
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
-    ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
-    ctx.fill()
-    ctx.lineWidth = isSelected ? 2.6 : 1.5
-    ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
-    ctx.stroke()
-
-    const shouldDrawLabels =
-      isSelected ||
-      isHovered ||
-      (state.nodes.length > largeGraphNodeThreshold && state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) ||
-      (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
-    if (shouldDrawLabels) {
-      ctx.fillStyle = graphTheme.label
-      ctx.font = '12px Inter, system-ui, sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'top'
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
-    }
-    })
+    drawGraphNodes()
   }
 
   ctx.restore()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andespindola/brainlink",
-  "version": "0.1.0-beta.79",
+  "version": "0.1.0-beta.80",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",