@andespindola/brainlink 0.1.0-beta.46 → 0.1.0-beta.48

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

@@ -7,6 +7,8 @@ const renderNodeBudget = 900
 const renderEdgeBudget = 2400
 const clusterActivationNodeThreshold = 600
 const clusterZoomThreshold = 0.18
+const macroGalaxyZoomThreshold = 0.012
+const massiveAutoFitMacroScale = 0.006
 const clusterCellPixelSize = 64
 const minNodePixelRadius = 2.3
 const viewportPaddingPx = 280
@@ -45,6 +47,8 @@ const state = {
   visibleNodeSpatial: { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() },
   visibleEdgeByNode: new Map(),
   overviewClusters: [],
+  macroCenter: { x: 0, y: 0 },
+  macroRepresentative: null,
   filterWorker: null,
   filterReady: false,
   lastHoverHitAt: 0
@@ -245,6 +249,26 @@ const filteredNodes = () => {
   return withPersistentHubNodes(localFilteredNodes(query))
 }
 
+const resolveMacroRepresentative = (nodes) => {
+  if (nodes.length === 0) {
+    return null
+  }
+
+  let best = nodes[0]
+  let bestDegree = state.nodeDegrees.get(best.id) ?? 0
+
+  for (let index = 1; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const degree = state.nodeDegrees.get(node.id) ?? 0
+    if (degree > bestDegree) {
+      best = node
+      bestDegree = degree
+    }
+  }
+
+  return best
+}
+
 const recomputeVisibility = () => {
   const nodes = filteredNodes()
   const ids = new Set(nodes.map(node => node.id))
@@ -260,6 +284,14 @@ const recomputeVisibility = () => {
   state.visibleNodeSpatial = createSpatialIndex(nodes)
   state.visibleEdgeByNode = createVisibleEdgeLookup(limitedEdges)
   state.overviewClusters = nodes.length > massiveGraphNodeThreshold ? buildOverviewClusters(nodes) : []
+  const bounds = graphBounds(nodes)
+  state.macroCenter = bounds
+    ? {
+      x: (bounds.minX + bounds.maxX) / 2,
+      y: (bounds.minY + bounds.maxY) / 2
+    }
+    : { x: 0, y: 0 }
+  state.macroRepresentative = resolveMacroRepresentative(nodes)
   markRenderDirty()
 }
 
@@ -500,17 +532,17 @@ const fallbackViewportNodes = () => {
   return nodes
 }
 
-const sampleVisibleNodes = (limit = renderNodeBudget) => {
-  if (state.visibleNodes.length === 0 || limit <= 0) {
+const sampleVisibleNodes = (limit = renderNodeBudget, sourceNodes = state.visibleNodes) => {
+  if (sourceNodes.length === 0 || limit <= 0) {
     return []
   }
 
   const nodes = []
-  const maxNodes = Math.min(Math.max(limit, 1), state.visibleNodes.length)
-  const step = Math.max(1, Math.ceil(state.visibleNodes.length / maxNodes))
+  const maxNodes = Math.min(Math.max(limit, 1), sourceNodes.length)
+  const step = Math.max(1, Math.ceil(sourceNodes.length / maxNodes))
 
-  for (let index = 0; index < state.visibleNodes.length && nodes.length < maxNodes; index += step) {
-    nodes.push(state.visibleNodes[index])
+  for (let index = 0; index < sourceNodes.length && nodes.length < maxNodes; index += step) {
+    nodes.push(sourceNodes[index])
   }
 
   if (state.selected && !nodes.find(node => node.id === state.selected.id)) {
@@ -607,7 +639,10 @@ const fitView = (options = { useFiltered: true }) => {
   const fitScale = Math.min(scaleX, scaleY)
   const biasedScale = clampScale(fitScale * fitScaleBiasByNodeCount(nodes.length))
   const scaleRange = autoFitScaleRangeByNodeCount(nodes.length)
-  const scale = clampScale(Math.min(scaleRange.max, Math.max(scaleRange.min, biasedScale)))
+  const baselineScale = clampScale(Math.min(scaleRange.max, Math.max(scaleRange.min, biasedScale)))
+  const scale = nodes.length > massiveGraphNodeThreshold
+    ? clampScale(Math.min(baselineScale, massiveAutoFitMacroScale))
+    : baselineScale
   const centerX = (bounds.minX + bounds.maxX) / 2
   const centerY = (bounds.minY + bounds.maxY) / 2
 
@@ -981,14 +1016,34 @@ const computeRenderVisibility = () => {
   if (state.visibleNodes.length > massiveGraphNodeThreshold) {
     const viewportNodes = viewportNodesFromSpatialIndex(viewport)
     const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
+    if (state.transform.scale <= macroGalaxyZoomThreshold) {
+      const representative = state.macroRepresentative ?? sourceNodes[0] ?? null
+      if (representative) {
+        state.renderClusters = [
+          {
+            id: 'macro-galaxy',
+            x: state.macroCenter.x,
+            y: state.macroCenter.y,
+            count: sourceNodes.length,
+            representative
+          }
+        ]
+        state.renderNodes = [representative]
+      } else {
+        state.renderClusters = []
+        state.renderNodes = []
+      }
+      state.renderEdges = []
+      return
+    }
     const sampleLimit = nodeBudgetForScale(state.transform.scale)
     const sampled = sourceNodes.length > sampleLimit
-      ? sampleVisibleNodes(Math.min(sampleLimit, renderNodeBudget))
+      ? sampleVisibleNodes(Math.min(sampleLimit, renderNodeBudget), sourceNodes)
       : sourceNodes.slice(0, Math.min(sourceNodes.length, renderNodeBudget))
     const sampledIds = new Set(sampled.map((node) => node.id))
     state.renderClusters = []
     state.renderNodes = sampled
-    state.renderEdges = state.transform.scale >= 0.12 ? collectVisibleEdgesForNodes(sampledIds) : []
+    state.renderEdges = state.transform.scale >= 0.1 ? collectVisibleEdgesForNodes(sampledIds) : []
     return
   }
 
@@ -1143,9 +1198,15 @@ const render = now => {
   } else {
     state.offscreenFrameCount = 0
   }
+  const minimumEdgeScale =
+    state.nodes.length > massiveGraphNodeThreshold
+      ? 0.1
+      : state.nodes.length > largeGraphNodeThreshold
+        ? 0.16
+        : 0
   const drawEdges =
     state.renderClusters.length === 0 &&
-    !(state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.22)
+    state.transform.scale >= minimumEdgeScale
   if (drawEdges) {
     state.renderEdges.forEach(edge => {
     const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
@@ -1161,19 +1222,22 @@ const render = now => {
   if (state.renderClusters.length > 0) {
     const safeScale = Math.max(state.transform.scale, 0.0001)
     state.renderClusters.forEach(cluster => {
-      const radiusPx = Math.max(8, Math.min(28, 8 + Math.log2(cluster.count + 1) * 3))
+      const isMacro = cluster.id === 'macro-galaxy'
+      const radiusPx = isMacro
+        ? 10
+        : Math.max(8, Math.min(28, 8 + Math.log2(cluster.count + 1) * 3))
       const radius = radiusPx / safeScale
-      const haloRadius = (radiusPx + 4) / safeScale
+      const haloRadius = (radiusPx + (isMacro ? 8 : 4)) / safeScale
       ctx.beginPath()
       ctx.arc(cluster.x, cluster.y, haloRadius, 0, Math.PI * 2)
-      ctx.fillStyle = graphTheme.nodeHalo
+      ctx.fillStyle = isMacro ? 'rgba(243, 247, 251, 0.28)' : graphTheme.nodeHalo
       ctx.fill()
       ctx.beginPath()
       ctx.arc(cluster.x, cluster.y, radius, 0, Math.PI * 2)
-      ctx.fillStyle = graphTheme.node
+      ctx.fillStyle = isMacro ? '#f3f7fb' : graphTheme.node
       ctx.fill()
       ctx.lineWidth = 1.4 / safeScale
-      ctx.strokeStyle = graphTheme.nodeStroke
+      ctx.strokeStyle = isMacro ? '#ffffff' : graphTheme.nodeStroke
       ctx.stroke()
       // Keep cluster markers minimal and faster to draw on large graphs.
     })

package/package.json

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