@andespindola/brainlink 0.1.0-beta.75 → 0.1.0-beta.77

package/README.md

@@ -594,7 +594,7 @@ The graph UI shows:
 - 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)
-- massive-graph LOD progression: very low zoom uses spatial overview sampling to preserve whole-vault shape while keeping node visuals consistent, then progressively reveals nodes and edges as zoom increases
+- 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 reveals nodes and edges as zoom increases
 
 The server indexes before starting by default. Use `--no-index` to skip that step:
 

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

@@ -579,6 +579,14 @@ const nodeBudgetForScale = (scale) => {
   return renderNodeBudget
 }
 
+const massiveLowZoomNodeBudgetForScale = (scale) => {
+  if (scale < 0.004) return 780
+  if (scale < 0.01) return 860
+  if (scale < 0.02) return 900
+  if (scale < 0.035) return 900
+  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)
@@ -1110,6 +1118,89 @@ const enrichSampleWithNeighbors = (nodes) => {
   }
 }
 
+const includeHubPreviewNeighborhood = (nodes, limit) => {
+  const hub = state.primaryHub
+  if (!hub) {
+    return nodes
+  }
+
+  const maxNodes = Math.max(1, Math.min(renderNodeBudget, limit))
+  const merged = [...nodes]
+  const ids = new Set(merged.map((node) => node.id))
+  const protectedIds = new Set()
+
+  if (!ids.has(hub.id)) {
+    if (merged.length < maxNodes) {
+      merged.push(hub)
+      ids.add(hub.id)
+    } else {
+      const replaceIndex = merged.findIndex((node) => node.id !== hub.id)
+      if (replaceIndex >= 0) {
+        ids.delete(merged[replaceIndex].id)
+        merged[replaceIndex] = hub
+        ids.add(hub.id)
+      }
+    }
+  }
+  protectedIds.add(hub.id)
+
+  const hubEdges = [...(state.visibleEdgeByNode.get(hub.id) ?? [])]
+    .filter((edge) => edge.target && (edge.source === hub.id || edge.target === hub.id))
+    .sort((left, right) => {
+      const byWeight = edgeWeight(right) - edgeWeight(left)
+      if (byWeight !== 0) return byWeight
+
+      const leftOtherId = left.source === hub.id ? left.target : left.source
+      const rightOtherId = right.source === hub.id ? right.target : right.source
+      const leftDegree = state.nodeDegrees.get(leftOtherId ?? '') ?? 0
+      const rightDegree = state.nodeDegrees.get(rightOtherId ?? '') ?? 0
+      if (leftDegree !== rightDegree) return rightDegree - leftDegree
+
+      return edgeIdentityKey(left).localeCompare(edgeIdentityKey(right))
+    })
+
+  for (let index = 0; index < hubEdges.length && merged.length < maxNodes; index += 1) {
+    const edge = hubEdges[index]
+    const otherId = edge.source === hub.id ? edge.target : edge.source
+    if (!otherId || ids.has(otherId)) {
+      continue
+    }
+
+    const otherNode = state.nodeById.get(otherId)
+    if (!otherNode) {
+      continue
+    }
+
+    if (merged.length < maxNodes) {
+      ids.add(otherId)
+      merged.push(otherNode)
+      protectedIds.add(otherId)
+      continue
+    }
+
+    const replaceIndex = (() => {
+      for (let cursor = merged.length - 1; cursor >= 0; cursor -= 1) {
+        const candidateId = merged[cursor]?.id
+        if (candidateId && !protectedIds.has(candidateId)) {
+          return cursor
+        }
+      }
+      return -1
+    })()
+    if (replaceIndex >= 0) {
+      const replacedId = merged[replaceIndex]?.id
+      if (replacedId) {
+        ids.delete(replacedId)
+      }
+      merged[replaceIndex] = otherNode
+      ids.add(otherId)
+      protectedIds.add(otherId)
+    }
+  }
+
+  return merged
+}
+
 const ensureHubNodesInRenderedSet = (nodes) => {
   if (nodes.length === 0) {
     return nodes
@@ -1225,7 +1316,7 @@ const autoFitScaleRangeByNodeCount = nodeCount => {
   if (nodeCount <= 600) return { min: 0.12, max: 0.72 }
   if (nodeCount <= 2000) return { min: 0.08, max: 0.52 }
   if (nodeCount <= 6000) return { min: 0.06, max: 0.32 }
-  return { min: 0.0008, max: 0.24 }
+  return { min: 0.0012, max: 0.24 }
 }
 
 const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: true }) => {
@@ -1824,16 +1915,26 @@ const computeRenderVisibility = () => {
   if (state.visibleNodes.length > massiveGraphNodeThreshold) {
     const viewportNodes = viewportNodesFromSpatialIndex(viewport)
     if (state.transform.scale <= massiveOverviewClusterScaleThreshold) {
+      const overviewLimit = Math.min(renderNodeBudget, massiveLowZoomNodeBudgetForScale(state.transform.scale))
       const overviewClusters = filterOverviewClustersByViewport(viewport)
         .sort((left, right) => right.count - left.count)
-        .slice(0, Math.min(renderNodeBudget, clusterBudgetForScale(state.transform.scale)))
+        .slice(0, overviewLimit)
       if (overviewClusters.length > 0) {
-        state.renderClusters = []
-        state.renderNodes = representativeNodesFromClusters(
+        const overviewNodes = representativeNodesFromClusters(
           overviewClusters,
-          Math.min(renderNodeBudget, clusterBudgetForScale(state.transform.scale))
+          overviewLimit
+        )
+        const anchoredNodes = includeHubPreviewNeighborhood(
+          overviewNodes,
+          Math.min(renderNodeBudget, overviewLimit)
         )
-        state.renderEdges = []
+        const enriched = enrichSampleWithNeighbors(anchoredNodes)
+        const previewNodes = ensureHubNodesInRenderedSet(enriched.nodes)
+        const previewIds = new Set(previewNodes.map((node) => node.id))
+        const previewEdges = collectVisibleEdgesForNodes(previewIds)
+        state.renderClusters = []
+        state.renderNodes = previewNodes
+        state.renderEdges = previewEdges
         return
       }
     }
@@ -1863,9 +1964,15 @@ const computeRenderVisibility = () => {
       sampledRaw,
       Math.min(sampleLimit, renderNodeBudget)
     )
-    const sampledIds = new Set(sampled.map((node) => node.id))
-    let sampledEdges = state.transform.scale >= 0.035 ? collectVisibleEdgesForNodes(sampledIds) : []
     let sampledNodes = ensureHubNodesInRenderedSet(sampled)
+    if (state.transform.scale < 0.035) {
+      sampledNodes = includeHubPreviewNeighborhood(
+        sampledNodes,
+        Math.min(renderNodeBudget, sampleLimit + 160)
+      )
+    }
+    const sampledIds = new Set(sampledNodes.map((node) => node.id))
+    let sampledEdges = collectVisibleEdgesForNodes(sampledIds)
 
     if (state.transform.scale >= 0.035 && sampledEdges.length === 0) {
       const enriched = enrichSampleWithNeighbors(sampledNodes)
@@ -2035,13 +2142,15 @@ const render = now => {
     state.offscreenFrameCount = 0
   }
   const minimumEdgeScale =
-    state.renderNodes.length > 1300
-      ? 0.12
-      : state.renderNodes.length > 900
-        ? 0.085
-        : state.renderNodes.length > 500
-          ? 0.05
-          : 0
+    state.nodes.length > massiveGraphNodeThreshold
+      ? 0
+      : state.renderNodes.length > 1300
+        ? 0.12
+        : state.renderNodes.length > 900
+          ? 0.085
+          : state.renderNodes.length > 500
+            ? 0.05
+            : 0
   const drawEdges =
     state.renderClusters.length === 0 &&
     state.transform.scale >= minimumEdgeScale
@@ -2224,8 +2333,28 @@ const selectNodeById = id => {
 }
 
 const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
+  const resolveZoomFactor = () => {
+    if (state.nodes.length <= massiveGraphNodeThreshold) {
+      return factor
+    }
+
+    const scale = state.transform.scale
+    if (factor > 1) {
+      if (scale < 0.006) return Math.max(factor, 1.48)
+      if (scale < 0.02) return Math.max(factor, 1.34)
+      if (scale < 0.08) return Math.max(factor, 1.22)
+      return factor
+    }
+
+    if (scale < 0.006) return Math.min(factor, 0.68)
+    if (scale < 0.02) return Math.min(factor, 0.78)
+    if (scale < 0.08) return Math.min(factor, 0.86)
+    return factor
+  }
+
   state.lastManualZoomAt = performance.now()
-  const nextScale = clampScale(state.transform.scale * factor)
+  const effectiveFactor = resolveZoomFactor()
+  const nextScale = clampScale(state.transform.scale * effectiveFactor)
   if (nextScale === state.transform.scale) {
     return
   }
@@ -2302,11 +2431,11 @@ const bindEvents = () => {
   })
   elements.zoomIn.addEventListener('click', () => {
     const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.14)
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.14, 'button')
   })
   elements.zoomOut.addEventListener('click', () => {
     const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.88)
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.88, 'button')
   })
   if (elements.fit) {
     elements.fit.addEventListener('click', () => {

package/package.json

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