@andespindola/brainlink 0.1.0-beta.116 → 0.1.0-beta.118

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

@@ -6,7 +6,10 @@ const massiveGraphNodeThreshold = 20000
 const largeGraphEdgeRenderLimit = 120000
 const renderNodeBudget = 900
 const zoomedMassiveRenderNodeBudget = 2200
-const renderEdgeBudget = 2400
+const massiveOverviewRenderNodeBudget = 1800
+const massiveOverviewScaleThreshold = 0.065
+const massiveSegmentedScaleThreshold = 0.45
+const massiveSegmentRepresentativeBudget = 760
 const massiveAutoFitMacroScale = 0.018
 const minNodePixelRadius = 2.3
 const viewportPaddingPx = 280
@@ -17,7 +20,6 @@ const zoomRecoveryGuardMs = 4200
 const meshEdgeScaleThreshold = 0.09
 const meshEdgeMinBudget = 140
 const meshEdgeMaxBudget = 1400
-const layeredCoreScaleThreshold = 0.55
 const dragNeighborhoodMaxAffected = 180
 const dragSettleRounds = 3
 const wheelZoomExponent = 0.0009
@@ -42,7 +44,6 @@ const state = {
   visibleEdges: [],
   renderNodes: [],
   renderEdges: [],
-  renderNodeDepthProjectionById: new Map(),
   nodeDegrees: new Map(),
   selected: null,
   hovered: null,
@@ -73,7 +74,6 @@ const state = {
   lastHoverHitAt: 0,
   lastManualZoomAt: 0,
   lastZoomFocus: { x: 0, y: 0, at: 0 },
-  depthProjectionActive: false,
   zoomTransition: {
     active: false,
     source: 'generic',
@@ -635,12 +635,6 @@ const createVisibleEdgeLookup = edges => {
   return lookup
 }
 
-const isClusterInViewport = (cluster, viewport) =>
-  cluster.x >= viewport.minX &&
-  cluster.x <= viewport.maxX &&
-  cluster.y >= viewport.minY &&
-  cluster.y <= viewport.maxY
-
 const edgeBudgetForCurrentFrame = () => {
   const zoom = state.transform.scale
   if (zoom < 0.12) return 380
@@ -652,112 +646,24 @@ const edgeBudgetForCurrentFrame = () => {
   return 7600
 }
 
-const clusterBudgetForScale = (scale) => {
-  if (scale < 0.008) return 90
-  if (scale < 0.014) return 150
-  if (scale < 0.022) return 240
-  if (scale < 0.035) return 360
-  return 520
-}
-
 const nodeBudgetForScale = (scale) => {
-  if (scale < 0.035) return 220
-  if (scale < 0.06) return 360
-  if (scale < 0.09) return 520
-  if (scale < 0.14) return 720
   if (state.visibleNodes.length > massiveGraphNodeThreshold) {
+    if (scale < massiveOverviewScaleThreshold) return massiveOverviewRenderNodeBudget
+    if (scale < 0.09) return 1600
+    if (scale < 0.14) return 1800
     if (scale < 0.28) return renderNodeBudget
     if (scale < 0.45) return 1100
     if (scale < 0.7) return 1400
     if (scale < 1.05) return 1800
     return zoomedMassiveRenderNodeBudget
   }
+  if (scale < 0.035) return 220
+  if (scale < 0.06) return 360
+  if (scale < 0.09) return 520
+  if (scale < 0.14) return 720
   return renderNodeBudget
 }
 
-const layerFocusForScale = (scale) => {
-  const normalized = Math.max(0, Math.min(1, (scale - 0.06) / 0.94))
-  const shellCenter = Math.max(0.08, 0.96 - normalized * 0.86)
-  const shellWidth = Math.max(0.24, 0.46 - normalized * 0.16)
-  const coreRadius = Math.max(0.06, 0.1 + normalized * 0.22)
-  const coreRatio = Math.max(0.2, Math.min(0.72, 0.24 + normalized * 0.48))
-
-  return { shellCenter, shellWidth, coreRadius, coreRatio }
-}
-
-const selectLayeredNodesForScale = (sourceNodes, targetCount) => {
-  const hub = state.primaryHub
-  if (!hub || sourceNodes.length <= 1200 || state.visibleNodes.length <= massiveGraphNodeThreshold) {
-    return sourceNodes
-  }
-
-  let maxDistance = 0
-  const distances = sourceNodes.map((node) => {
-    const distance = Math.hypot(node.x - hub.x, node.y - hub.y)
-    if (distance > maxDistance) {
-      maxDistance = distance
-    }
-    return { node, distance }
-  })
-
-  if (maxDistance <= 0.001) {
-    return sourceNodes
-  }
-
-  const focus = layerFocusForScale(state.transform.scale)
-  const normalizedRows = distances.map((item) => ({
-    ...item,
-    normalized: item.distance / maxDistance
-  }))
-  const desired = Math.max(260, Math.min(sourceNodes.length, targetCount * 2))
-  const coreTarget = Math.max(36, Math.min(desired - 8, Math.floor(desired * focus.coreRatio)))
-  const shellTarget = Math.max(12, desired - coreTarget)
-  const shellHalf = focus.shellWidth / 2
-
-  const coreNodes = normalizedRows
-    .filter((item) => item.normalized <= focus.coreRadius)
-    .sort((left, right) => {
-      const leftScore = state.nodeDegrees.get(left.node.id) ?? 0
-      const rightScore = state.nodeDegrees.get(right.node.id) ?? 0
-      if (leftScore !== rightScore) return rightScore - leftScore
-      return left.node.id.localeCompare(right.node.id)
-    })
-    .slice(0, coreTarget)
-    .map((item) => item.node)
-
-  const shellNodes = normalizedRows
-    .sort((left, right) => {
-      const leftDelta = Math.abs(left.normalized - focus.shellCenter)
-      const rightDelta = Math.abs(right.normalized - focus.shellCenter)
-      const leftInside = leftDelta <= shellHalf ? 0 : 1
-      const rightInside = rightDelta <= shellHalf ? 0 : 1
-      if (leftInside !== rightInside) return leftInside - rightInside
-      if (leftDelta !== rightDelta) return leftDelta - rightDelta
-      const leftScore = state.nodeDegrees.get(left.node.id) ?? 0
-      const rightScore = state.nodeDegrees.get(right.node.id) ?? 0
-      if (leftScore !== rightScore) return rightScore - leftScore
-      return left.node.id.localeCompare(right.node.id)
-    })
-    .slice(0, shellTarget)
-    .map((item) => item.node)
-
-  const merged = []
-  const ids = new Set()
-  const pushUnique = (node) => {
-    if (!node || ids.has(node.id)) return
-    ids.add(node.id)
-    merged.push(node)
-  }
-
-  if (state.transform.scale >= layeredCoreScaleThreshold) {
-    pushUnique(hub)
-  }
-  for (let index = 0; index < coreNodes.length; index += 1) pushUnique(coreNodes[index])
-  for (let index = 0; index < shellNodes.length; index += 1) pushUnique(shellNodes[index])
-
-  return merged.length > 0 ? merged : sourceNodes
-}
-
 const viewportCenterWorldPoint = () => {
   const viewport = worldViewportBounds()
   return {
@@ -857,31 +763,6 @@ const selectStableSampleNodes = (sourceNodes, limit) => {
     .slice(0, limit)
 }
 
-const selectAccessBridgeNodes = (sourceNodes, limit) => {
-  if (limit <= 0 || sourceNodes.length === 0) {
-    return []
-  }
-
-  const now = performance.now()
-  const cursorPoint = cursorWorldPoint()
-  const recentZoomFocus =
-    now - state.lastZoomFocus.at <= 1200
-      ? { x: state.lastZoomFocus.x, y: state.lastZoomFocus.y }
-      : null
-  const anchor = cursorPoint ?? recentZoomFocus ?? viewportCenterWorldPoint()
-  return [...sourceNodes]
-    .sort((left, right) => {
-      const leftDistance = Math.hypot(left.x - anchor.x, left.y - anchor.y)
-      const rightDistance = Math.hypot(right.x - anchor.x, right.y - anchor.y)
-      if (leftDistance !== rightDistance) return leftDistance - rightDistance
-      const leftDegree = state.nodeDegrees.get(left.id) ?? 0
-      const rightDegree = state.nodeDegrees.get(right.id) ?? 0
-      if (leftDegree !== rightDegree) return rightDegree - leftDegree
-      return left.id.localeCompare(right.id)
-    })
-    .slice(0, limit)
-}
-
 const edgeIdentityKey = edge => {
   if (!edge.target) return ''
   const pair = edge.source < edge.target
@@ -1002,8 +883,8 @@ const edgeWidthFor = (edge, selectedEdge) => {
 const drawGraphEdge = (edge) => {
   const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
   ctx.beginPath()
-  ctx.moveTo(nodeRenderX(edge.sourceNode), nodeRenderY(edge.sourceNode))
-  ctx.lineTo(nodeRenderX(edge.targetNode), nodeRenderY(edge.targetNode))
+  ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+  ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
   ctx.strokeStyle = edgeStrokeFor(edge, selectedEdge)
   ctx.lineWidth = edgeWidthFor(edge, selectedEdge)
   ctx.stroke()
@@ -1017,8 +898,8 @@ const drawEdgeBatch = (edges, options) => {
   ctx.beginPath()
   for (let index = 0; index < edges.length; index += 1) {
     const edge = edges[index]
-    ctx.moveTo(nodeRenderX(edge.sourceNode), nodeRenderY(edge.sourceNode))
-    ctx.lineTo(nodeRenderX(edge.targetNode), nodeRenderY(edge.targetNode))
+    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
   }
   ctx.strokeStyle = options.strokeStyle
   ctx.lineWidth = options.lineWidth
@@ -1073,13 +954,11 @@ const shouldDrawNodeLabels = (node, isSelected, isHovered) =>
   (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
 
 const drawSingleNode = (node, options = { drawLabel: true }) => {
-  const radius = nodeRadius(node) * nodeRenderScale(node)
-  const x = nodeRenderX(node)
-  const y = nodeRenderY(node)
-  const opacity = nodeRenderOpacity(node)
+  const radius = nodeRadius(node)
+  const x = node.x
+  const y = node.y
   const isSelected = state.selected?.id === node.id
   const isHovered = state.hovered?.id === node.id
-  ctx.globalAlpha = opacity
   ctx.beginPath()
   ctx.arc(x, y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
   ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
@@ -1093,7 +972,7 @@ const drawSingleNode = (node, options = { drawLabel: true }) => {
   ctx.stroke()
 
   if (options.drawLabel && shouldDrawNodeLabels(node, isSelected, isHovered)) {
-    ctx.globalAlpha = Math.max(0.58, opacity)
+    ctx.globalAlpha = 1
     ctx.fillStyle = graphTheme.label
     ctx.font = '12px Inter, system-ui, sans-serif'
     ctx.textAlign = 'center'
@@ -1112,10 +991,10 @@ const drawNodeBatch = (nodes) => {
   if (drawHalos) {
     for (let index = 0; index < nodes.length; index += 1) {
       const node = nodes[index]
-      const radius = nodeRadius(node) * nodeRenderScale(node)
-      const x = nodeRenderX(node)
-      const y = nodeRenderY(node)
-      ctx.globalAlpha = Math.max(0.2, nodeRenderOpacity(node) * 0.5)
+      const radius = nodeRadius(node)
+      const x = node.x
+      const y = node.y
+      ctx.globalAlpha = 0.5
       ctx.beginPath()
       ctx.arc(x, y, radius + 3, 0, Math.PI * 2)
       ctx.fillStyle = graphTheme.nodeHalo
@@ -1126,11 +1005,10 @@ const drawNodeBatch = (nodes) => {
 
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
-    const radius = nodeRadius(node) * nodeRenderScale(node)
-    const x = nodeRenderX(node)
-    const y = nodeRenderY(node)
-    const opacity = nodeRenderOpacity(node)
-    ctx.globalAlpha = opacity
+    const radius = nodeRadius(node)
+    const x = node.x
+    const y = node.y
+    ctx.globalAlpha = 1
     ctx.beginPath()
     ctx.arc(x, y, radius, 0, Math.PI * 2)
     ctx.fillStyle = graphTheme.node
@@ -1167,10 +1045,10 @@ const drawGraphNodes = () => {
     ctx.textBaseline = 'top'
     for (let index = 0; index < regularNodes.length; index += 1) {
       const node = regularNodes[index]
-      const x = nodeRenderX(node)
-      const y = nodeRenderY(node)
-      const radius = nodeRadius(node) * nodeRenderScale(node)
-      ctx.globalAlpha = Math.max(0.6, nodeRenderOpacity(node))
+      const x = node.x
+      const y = node.y
+      const radius = nodeRadius(node)
+      ctx.globalAlpha = 1
       ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
     }
     ctx.globalAlpha = 1
@@ -1224,10 +1102,10 @@ const drawGraphLabels = nodes => {
   ctx.textBaseline = 'top'
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
-    const x = nodeRenderX(node)
-    const y = nodeRenderY(node)
-    const radius = nodeRadius(node) * nodeRenderScale(node)
-    ctx.globalAlpha = Math.max(0.6, nodeRenderOpacity(node))
+    const x = node.x
+    const y = node.y
+    const radius = nodeRadius(node)
+    ctx.globalAlpha = 1
     ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
   }
   ctx.globalAlpha = 1
@@ -1435,6 +1313,82 @@ const sampleVisibleNodes = (limit = renderNodeBudget, sourceNodes = state.visibl
   return nodes
 }
 
+const sampleMassiveOverviewNodes = (limit) => {
+  const sampled = sampleVisibleNodes(limit, state.visibleNodes)
+  return ensureHubNodesInRenderedSet(sampled)
+}
+
+const representativeNodeFromBucket = bucket => {
+  if (!bucket || bucket.length === 0) {
+    return null
+  }
+
+  let representative = bucket[0]
+  let representativeDegree = state.nodeDegrees.get(representative.id) ?? 0
+
+  for (let index = 1; index < bucket.length; index += 1) {
+    const candidate = bucket[index]
+    const candidateDegree = state.nodeDegrees.get(candidate.id) ?? 0
+    if (candidateDegree <= representativeDegree) {
+      continue
+    }
+    representative = candidate
+    representativeDegree = candidateDegree
+  }
+
+  return representative
+}
+
+const sampleMassiveSegmentRepresentatives = (limit) => {
+  const spatial = state.visibleNodeSpatial
+  if (!spatial || spatial.buckets.size === 0 || limit <= 0) {
+    return []
+  }
+
+  const keys = [...spatial.buckets.keys()].sort()
+  const maxNodes = Math.min(limit, keys.length)
+  const step = Math.max(1, Math.ceil(keys.length / maxNodes))
+  const representatives = []
+
+  for (let index = 0; index < keys.length && representatives.length < maxNodes; index += step) {
+    const representative = representativeNodeFromBucket(spatial.buckets.get(keys[index]))
+    if (representative) {
+      representatives.push(representative)
+    }
+  }
+
+  return representatives
+}
+
+const massiveSegmentRepresentativeLimit = (scale, limit) => {
+  if (scale >= massiveSegmentedScaleThreshold) {
+    return 0
+  }
+  if (scale < 0.09) {
+    return Math.min(massiveSegmentRepresentativeBudget, Math.floor(limit * 0.5))
+  }
+  if (scale < 0.18) {
+    return Math.min(620, Math.floor(limit * 0.42))
+  }
+  if (scale < 0.28) {
+    return Math.min(460, Math.floor(limit * 0.34))
+  }
+  return Math.min(260, Math.floor(limit * 0.22))
+}
+
+const sampleMassiveSegmentedNodes = (limit, viewport) => {
+  const representativeLimit = massiveSegmentRepresentativeLimit(state.transform.scale, limit)
+  const representatives = sampleMassiveSegmentRepresentatives(representativeLimit)
+  const localLimit = Math.max(1, limit - representatives.length)
+  const localMargin = Math.max(520, Math.min(5200, 780 / Math.max(state.transform.scale, 0.0001)))
+  const localViewport = expandViewportBounds(viewport, localMargin)
+  const localViewportNodes = viewportNodesFromSpatialIndex(localViewport)
+  const localSource = localViewportNodes.length > 0 ? localViewportNodes : state.visibleNodes
+  const localNodes = selectStableSampleNodes(localSource, localLimit)
+
+  return mergeUniqueNodes(representatives, localNodes, limit)
+}
+
 const enrichSampleWithNeighbors = (nodes) => {
   if (nodes.length === 0) {
     return {
@@ -1724,7 +1678,7 @@ const autoFitScaleRangeByNodeCount = nodeCount => {
   return { min: 0.0085, max: 0.36 }
 }
 
-const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: true }) => {
+const fitView = (options = { useFiltered: true, preferHubCenter: true }) => {
   const rect = canvas.getBoundingClientRect()
   const width = Math.max(rect.width, 320)
   const height = Math.max(rect.height, 320)
@@ -1777,12 +1731,12 @@ const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: t
   markRenderDirty()
 }
 
-const resetView = () => fitView({ useFiltered: false, macro: false, preferHubCenter: false })
+const resetView = () => fitView({ useFiltered: false, preferHubCenter: false })
 
 const focusPrimaryHub = () => {
   const hub = state.primaryHub
   if (!hub) {
-    fitView({ useFiltered: true, macro: false, preferHubCenter: true })
+    fitView({ useFiltered: true, preferHubCenter: true })
     return
   }
 
@@ -2161,9 +2115,9 @@ const hitNode = point => {
   const nodes = state.renderNodes
   for (let index = nodes.length - 1; index >= 0; index -= 1) {
     const node = nodes[index]
-    const radius = nodeRadius(node) * nodeRenderScale(node)
-    const x = nodeRenderX(node)
-    const y = nodeRenderY(node)
+    const radius = nodeRadius(node)
+    const x = node.x
+    const y = node.y
     if (Math.hypot(point.x - x, point.y - y) <= radius + 5) return node
   }
   return null
@@ -2176,15 +2130,6 @@ const baseNodeRadius = node => {
 
 const nodeRadius = node => Math.max(baseNodeRadius(node), minNodePixelRadius / Math.max(state.transform.scale, 0.0001))
 
-const refreshRenderNodeDepthProjection = () => {
-  state.renderNodeDepthProjectionById = new Map()
-}
-
-const projectedNode = node => state.renderNodeDepthProjectionById.get(node.id) ?? null
-const nodeRenderX = node => projectedNode(node)?.x ?? node.x
-const nodeRenderY = node => projectedNode(node)?.y ?? node.y
-const nodeRenderScale = node => projectedNode(node)?.scale ?? 1
-const nodeRenderOpacity = node => projectedNode(node)?.opacity ?? 1
 const worldViewportBounds = () => {
   const width = Math.max(state.viewport.width, 320)
   const height = Math.max(state.viewport.height, 320)
@@ -2264,9 +2209,26 @@ const computeRenderVisibility = () => {
   }
 
   if (state.visibleNodes.length > massiveGraphNodeThreshold) {
-    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
-    const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
     const sampleLimit = nodeBudgetForScale(state.transform.scale)
+    if (state.transform.scale < massiveOverviewScaleThreshold) {
+      const overviewNodes = sampleMassiveOverviewNodes(sampleLimit)
+      const overviewIds = new Set(overviewNodes.map((node) => node.id))
+      state.renderNodes = overviewNodes
+      state.renderEdges = withMeshEdges(overviewNodes, collectVisibleEdgesForNodes(overviewIds))
+      return
+    }
+
+    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
+    const segmentedNodes =
+      state.transform.scale < massiveSegmentedScaleThreshold
+        ? sampleMassiveSegmentedNodes(sampleLimit, viewport)
+        : []
+    const sourceNodes =
+      segmentedNodes.length > 0
+        ? segmentedNodes
+        : viewportNodes.length > 0
+          ? viewportNodes
+          : sampleMassiveOverviewNodes(sampleLimit)
     const carryMargin = Math.max(240, Math.min(1200, 340 / Math.max(state.transform.scale, 0.0001)))
     const carryViewport = expandViewportBounds(viewport, carryMargin)
     const carryOverLimit = Math.max(180, Math.min(sampleLimit, Math.floor(sampleLimit * 0.5)))
@@ -2441,10 +2403,11 @@ const render = now => {
 
   computeRenderVisibility()
   tick(delta, now)
-  refreshRenderNodeDepthProjection()
   const hasVisibleNodeOnScreen = state.renderNodes.some((node) => isNodeVisibleOnScreen(node, width, height))
   const manualZoomGuardActive = now - state.lastManualZoomAt < zoomRecoveryGuardMs
-  const allowViewportAutoRecovery = state.nodes.length <= massiveGraphNodeThreshold
+  const allowViewportAutoRecovery =
+    state.nodes.length <= massiveGraphNodeThreshold ||
+    state.transform.scale >= massiveOverviewScaleThreshold
   if (allowViewportAutoRecovery && !hasVisibleNodeOnScreen && state.renderNodes.length > 0 && !manualZoomGuardActive) {
     state.offscreenFrameCount += 1
     if (state.offscreenFrameCount >= 22 && !state.recoveringViewport) {

package/package.json

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