@andespindola/brainlink 0.1.0-beta.76 → 0.1.0-beta.78

package/README.md

@@ -83,6 +83,7 @@ Legacy `.jsonl.gz` packs are upgraded to `.blpk` automatically on first search/c
 - 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 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 now clusters dense regions and progressively expands nodes as zoom increases.
 - Graph reset starts in macro "galaxy" overview mode and progressively reveals nearby nodes as zoom increases, including smaller vaults.
 - Graph filtering runs in a dedicated browser worker to keep the UI thread responsive during heavy datasets.

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)
@@ -1119,6 +1127,7 @@ const includeHubPreviewNeighborhood = (nodes, limit) => {
   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) {
@@ -1133,6 +1142,7 @@ const includeHubPreviewNeighborhood = (nodes, limit) => {
       }
     }
   }
+  protectedIds.add(hub.id)
 
   const hubEdges = [...(state.visibleEdgeByNode.get(hub.id) ?? [])]
     .filter((edge) => edge.target && (edge.source === hub.id || edge.target === hub.id))
@@ -1161,8 +1171,31 @@ const includeHubPreviewNeighborhood = (nodes, limit) => {
       continue
     }
 
-    ids.add(otherId)
-    merged.push(otherNode)
+    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
@@ -1283,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 }) => {
@@ -1882,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
       }
     }
@@ -2099,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
@@ -2288,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
   }
@@ -2366,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/dist/domain/graph-layout.js

@@ -167,13 +167,17 @@ const groupNodesBySegment = (nodes, segments) => {
     return new Map(groups);
 };
 const segmentAngle = (segment, index, count) => segmentAngles[segment] ?? (Math.PI * 2 * index) / Math.max(count, 1) - Math.PI / 2;
+const petalSpreadForSegmentSize = (size) => {
+    const safeSize = Math.max(size, 1);
+    return 180 + Math.log2(safeSize + 1) * 6;
+};
 const createSegmentNodes = (segments, degrees, segmentCount) => ([segment, nodes], segmentIndex) => {
     const sortedNodes = [...nodes].sort(byDegreeThenTitle(degrees));
     const angle = segmentAngle(segment, segmentIndex, segmentCount);
     const baseRadius = segmentCount === 1 ? 0 : 340 + Math.min(sortedNodes.length, 22) * 10;
     const centerX = Math.cos(angle) * baseRadius;
     const centerY = Math.sin(angle) * (baseRadius * 0.78);
-    const petalSpread = 40 + Math.sqrt(sortedNodes.length) * 14;
+    const petalSpread = petalSpreadForSegmentSize(sortedNodes.length);
     return sortedNodes.map((node, index) => {
         const localAngle = index * 2.399963 + jitter(node.title, 0.42);
         const localRadius = Math.sqrt(index + 1) * petalSpread;

package/package.json

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