@andespindola/brainlink 0.1.0-beta.107 → 0.1.0-beta.109

package/README.md

@@ -601,6 +601,9 @@ The graph UI shows:
 - floating graph totals (notes, links, tags) below the Brainlink title
 - graph rendering safeguards (batched canvas drawing across graph sizes, edge draw caps, lower redraw rate, zoom-aware interaction)
 - adaptive CPU safeguards for large graphs: idle frame pacing, throttled background physics updates and cached viewport dimensions to reduce redraw/layout overhead while preserving interaction responsiveness
+- hierarchical hot-path optimizations reduce per-frame allocations and repeated scans during layered cluster expansion and edge projection
+- hierarchical edge projection now caches hub membership and node-to-cluster resolution per frame to keep large recursive subgraph rendering smooth during continuous zoom and pan
+- hierarchical projection now uses stronger perspective yaw/pitch and depth-based render ordering so layered subgraphs read as a true 3D field instead of a flat expansion
 - WebGL node and edge acceleration when supported, falling back to Canvas 2D without changing graph behavior
 - compact macro-to-micro density progression so reset keeps the graph mass oriented and zoom-in separates local neighborhoods progressively
 - graph camera treats hub-centered navigation as structural only when the hub is dominant; diffuse stress graphs reset and zoom around the full graph mass

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

@@ -35,6 +35,10 @@ const ecosystemDepthNear = 80
 const ecosystemDepthFar = 2600
 const ecosystemDepthPerspective = 620
 const ecosystemDepthTiltY = 0.24
+const ecosystemDepthYaw = 0.22
+const ecosystemDepthPitch = 0.16
+const ecosystemDepthRadialGain = 0.09
+const ecosystemDepthOrbitalMaxOffset = 160
 const ecosystemDepthMinScale = 0.24
 const ecosystemDepthOpacityFloor = 0.2
 const zoomRecoveryGuardMs = 4200
@@ -91,6 +95,8 @@ const state = {
   ecosystemClustersBySize: new Map(),
   ecosystemNodeClusterBySize: new Map(),
   ecosystemLevelSizes: [],
+  ecosystemLevelIndexBySize: new Map(),
+  ecosystemHubNodeIds: new Set(),
   ecosystemExpansionLevels: [],
   ecosystemBaseSize: ecosystemLevelNodeCap,
   ecosystemHubCluster: null,
@@ -617,6 +623,11 @@ const recomputeVisibility = () => {
   state.ecosystemClustersBySize = ecosystemGraph.clustersBySize
   state.ecosystemNodeClusterBySize = ecosystemGraph.nodeClusterBySize
   state.ecosystemLevelSizes = ecosystemGraph.levelSizes
+  state.ecosystemLevelIndexBySize = ecosystemGraph.levelSizes.reduce((map, size, index) => {
+    map.set(size, index)
+    return map
+  }, new Map())
+  state.ecosystemHubNodeIds = new Set(ecosystemGraph.hubCluster?.nodeIds ?? [])
   state.ecosystemExpansionLevels = ecosystemGraph.expansionLevels
   state.ecosystemBaseSize = ecosystemGraph.baseSize
   state.ecosystemHubCluster = ecosystemGraph.hubCluster
@@ -1105,10 +1116,18 @@ const expandFocusedClusters = (parentClusters, focusPoint, childSize, progress,
     ecosystemFocusedParentLimit
   ))
   const childClusters = state.ecosystemClustersBySize.get(childSize) ?? []
-  const visibleChildClusters = childClusters
-    .filter(cluster => expandedParentIds.has(cluster.parentId))
-    .map(cluster => spreadChildClusterFromParent(cluster, childSize, progress, spread))
-    .filter(cluster => isClusterInViewport(cluster, viewport))
+  const visibleChildClusters = []
+  for (let index = 0; index < childClusters.length; index += 1) {
+    const cluster = childClusters[index]
+    if (!expandedParentIds.has(cluster.parentId)) {
+      continue
+    }
+    const spreadCluster = spreadChildClusterFromParent(cluster, childSize, progress, spread)
+    if (!isClusterInViewport(spreadCluster, viewport)) {
+      continue
+    }
+    visibleChildClusters.push(spreadCluster)
+  }
 
   return {
     expandedParentIds,
@@ -1137,11 +1156,21 @@ const selectHierarchicalEcosystemClusters = viewport => {
   const visibleBaseClusters = filterEcosystemClustersByViewport(baseClusters, viewport)
   const hubClusters = state.ecosystemHubCluster ? [state.ecosystemHubCluster] : []
   const visibleClusters = [...visibleBaseClusters]
+  const clustersBySize = new Map()
+  for (let index = 0; index < visibleBaseClusters.length; index += 1) {
+    const cluster = visibleBaseClusters[index]
+    const levelClusters = clustersBySize.get(cluster.size)
+    if (levelClusters) {
+      levelClusters.push(cluster)
+    } else {
+      clustersBySize.set(cluster.size, [cluster])
+    }
+  }
   const focusPoint = ecosystemFocusPoint()
 
   for (let index = 0; index < state.ecosystemExpansionLevels.length; index += 1) {
     const level = state.ecosystemExpansionLevels[index]
-    const parentClusters = visibleClusters.filter(cluster => cluster.size === level.parentSize)
+    const parentClusters = clustersBySize.get(level.parentSize) ?? []
     if (parentClusters.length === 0) {
       continue
     }
@@ -1154,18 +1183,20 @@ const selectHierarchicalEcosystemClusters = viewport => {
     const spread = semanticZoomSpread(progress, level.childSize)
     const expansion = expandFocusedClusters(parentClusters, focusPoint, level.childSize, progress, spread, viewport)
     visibleClusters.push(...expansion.childClusters)
+    if (expansion.childClusters.length > 0) {
+      const levelClusters = clustersBySize.get(level.childSize)
+      if (levelClusters) {
+        levelClusters.push(...expansion.childClusters)
+      } else {
+        clustersBySize.set(level.childSize, [...expansion.childClusters])
+      }
+    }
   }
 
   return [...hubClusters, ...visibleClusters]
 }
 
-const ecosystemLevelIndexBySize = () => {
-  const indexBySize = new Map()
-  for (let index = 0; index < state.ecosystemLevelSizes.length; index += 1) {
-    indexBySize.set(state.ecosystemLevelSizes[index], index)
-  }
-  return indexBySize
-}
+const ecosystemLevelIndexBySize = () => state.ecosystemLevelIndexBySize
 
 const ecosystemDepthForCluster = (cluster, levelIndexMap) => {
   if (cluster.isHub) {
@@ -1180,12 +1211,23 @@ const ecosystemDepthForCluster = (cluster, levelIndexMap) => {
 
 const projectEcosystemPoint = (x, y, depth, anchor) => {
   const safeDepth = Math.max(0, depth)
-  const factor = ecosystemDepthPerspective / (ecosystemDepthPerspective + safeDepth)
-  const verticalTilt = safeDepth * ecosystemDepthTiltY
+  const dx = x - anchor.x
+  const dy = y - anchor.y
+  const yawSin = Math.sin(ecosystemDepthYaw)
+  const yawCos = Math.cos(ecosystemDepthYaw)
+  const pitchSin = Math.sin(ecosystemDepthPitch)
+  const pitchCos = Math.cos(ecosystemDepthPitch)
+  const rotatedX = dx * yawCos + safeDepth * yawSin
+  const rotatedZ = Math.max(0, safeDepth * yawCos - dx * yawSin)
+  const rotatedY = dy * pitchCos - rotatedZ * pitchSin
+  const projectedDepth = Math.max(0, rotatedZ + Math.max(0, dy * pitchSin))
+  const factor = ecosystemDepthPerspective / (ecosystemDepthPerspective + projectedDepth)
+  const verticalTilt = projectedDepth * ecosystemDepthTiltY
   return {
-    x: anchor.x + (x - anchor.x) * factor,
-    y: anchor.y + (y - anchor.y) * factor - verticalTilt,
-    factor
+    x: anchor.x + rotatedX * factor,
+    y: anchor.y + rotatedY * factor - verticalTilt,
+    factor,
+    projectedDepth
   }
 }
 
@@ -1196,7 +1238,13 @@ const applyEcosystemDepthProjection = (clusters, edges, anchor) => {
 
   for (let index = 0; index < clusters.length; index += 1) {
     const cluster = clusters[index]
-    const depth = ecosystemDepthForCluster(cluster, levelIndexMap)
+    const baseDepth = ecosystemDepthForCluster(cluster, levelIndexMap)
+    const radialDistance = Math.hypot(cluster.x - anchor.x, cluster.y - anchor.y)
+    const radialOffset = cluster.isHub ? 0 : Math.min(320, radialDistance * ecosystemDepthRadialGain)
+    const orbitalOffset = cluster.isHub
+      ? 0
+      : Math.sin(Math.atan2(cluster.y - anchor.y, cluster.x - anchor.x) * 2.2) * ecosystemDepthOrbitalMaxOffset
+    const depth = Math.max(0, baseDepth + radialOffset + orbitalOffset)
     const projected = projectEcosystemPoint(cluster.x, cluster.y, depth, anchor)
     const baseOpacity = Number.isFinite(cluster.lodOpacity) ? cluster.lodOpacity : 1
     const depthScale = ecosystemDepthMinScale + (1 - ecosystemDepthMinScale) * projected.factor
@@ -1209,27 +1257,27 @@ const applyEcosystemDepthProjection = (clusters, edges, anchor) => {
       x: projected.x,
       y: projected.y,
       lodOpacity: baseOpacity * depthOpacity,
-      depth,
+      depth: projected.projectedDepth,
       depthScale
     }
     projectedClusters.push(projectedCluster)
     clusterById.set(projectedCluster.id, projectedCluster)
   }
 
-  const projectedEdges = edges
-    .map((edge) => {
-      const sourceCluster = clusterById.get(edge.sourceCluster.id)
-      const targetCluster = clusterById.get(edge.targetCluster.id)
-      if (!sourceCluster || !targetCluster) {
-        return null
-      }
-      return {
-        ...edge,
-        sourceCluster,
-        targetCluster
-      }
+  const projectedEdges = []
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    const sourceCluster = clusterById.get(edge.sourceCluster.id)
+    const targetCluster = clusterById.get(edge.targetCluster.id)
+    if (!sourceCluster || !targetCluster) {
+      continue
+    }
+    projectedEdges.push({
+      ...edge,
+      sourceCluster,
+      targetCluster
     })
-    .filter(Boolean)
+  }
 
   return {
     clusters: projectedClusters,
@@ -1289,28 +1337,37 @@ const ecosystemEdgesForClusters = clusters => {
   const clusterById = new Map(edgeClusters.map(cluster => [cluster.id, cluster]))
   const clusterIds = new Set(clusterById.keys())
   const levelsBySize = []
+  const seenSizes = new Set()
   for (let index = 0; index < edgeClusters.length; index += 1) {
     const cluster = edgeClusters[index]
     if (!cluster.size || cluster.isHub) continue
-    if (!levelsBySize.some(level => level.size === cluster.size)) {
-      levelsBySize.push({
-        size: cluster.size,
-        lookup: state.ecosystemNodeClusterBySize.get(cluster.size) ?? new Map()
-      })
-    }
+    if (seenSizes.has(cluster.size)) continue
+    seenSizes.add(cluster.size)
+    levelsBySize.push({
+      size: cluster.size,
+      lookup: state.ecosystemNodeClusterBySize.get(cluster.size) ?? new Map()
+    })
   }
   levelsBySize.sort((left, right) => left.size - right.size)
+  const resolvedNodeClusterById = new Map()
   const resolveClusterForNode = nodeId => {
-    if (state.ecosystemHubCluster?.nodeIds.includes(nodeId) && clusterIds.has(state.ecosystemHubCluster.id)) {
+    if (resolvedNodeClusterById.has(nodeId)) {
+      return resolvedNodeClusterById.get(nodeId)
+    }
+    if (state.ecosystemHubNodeIds.has(nodeId) && state.ecosystemHubCluster && clusterIds.has(state.ecosystemHubCluster.id)) {
+      resolvedNodeClusterById.set(nodeId, state.ecosystemHubCluster)
       return state.ecosystemHubCluster
     }
     for (let index = 0; index < levelsBySize.length; index += 1) {
       const lookup = levelsBySize[index].lookup
       const cluster = lookup.get(nodeId)
       if (cluster && clusterIds.has(cluster.id)) {
-        return clusterById.get(cluster.id) ?? cluster
+        const resolvedCluster = clusterById.get(cluster.id) ?? cluster
+        resolvedNodeClusterById.set(nodeId, resolvedCluster)
+        return resolvedCluster
       }
     }
+    resolvedNodeClusterById.set(nodeId, null)
     return null
   }
 
@@ -2945,6 +3002,9 @@ const clusterRadiusPx = cluster => {
 const clusterOpacity = cluster =>
   Math.max(0, Math.min(1, Number.isFinite(cluster.lodOpacity) ? cluster.lodOpacity : 1))
 
+const clusterDepth = cluster => Number.isFinite(cluster.depth) ? cluster.depth : ecosystemDepthNear
+const clusterDepthScale = cluster => Number.isFinite(cluster.depthScale) ? cluster.depthScale : 1
+
 const worldViewportBounds = () => {
   const width = Math.max(state.viewport.width, 320)
   const height = Math.max(state.viewport.height, 320)
@@ -3364,6 +3424,8 @@ const render = now => {
     ctx.save()
     ctx.translate(state.transform.x, state.transform.y)
     ctx.scale(state.transform.scale, state.transform.scale)
+    const orderedClusters = [...state.renderClusters]
+      .sort((left, right) => clusterDepth(right) - clusterDepth(left))
     const safeScale = Math.max(state.transform.scale, 0.0001)
     if (state.renderClusterEdges.length > 0) {
       for (let index = 0; index < state.renderClusterEdges.length; index += 1) {
@@ -3372,15 +3434,17 @@ const render = now => {
         if (edgeOpacity <= 0.01) {
           continue
         }
+        const depthScale = Math.min(clusterDepthScale(edge.sourceCluster), clusterDepthScale(edge.targetCluster))
+        const widthScale = 0.6 + depthScale * 0.9
         ctx.beginPath()
         ctx.moveTo(edge.sourceCluster.x, edge.sourceCluster.y)
         ctx.lineTo(edge.targetCluster.x, edge.targetCluster.y)
-        ctx.lineWidth = 1.2 / safeScale
+        ctx.lineWidth = (1.2 * widthScale) / safeScale
         ctx.strokeStyle = 'rgba(153, 165, 181, ' + (edge.inferred ? 0.14 : 0.22) * edgeOpacity + ')'
         ctx.stroke()
       }
     }
-    state.renderClusters.forEach(cluster => {
+    orderedClusters.forEach(cluster => {
       const isMacro = cluster.id === 'macro-galaxy'
       const isEcosystem = String(cluster.id).startsWith('ecosystem-')
       const isHub = Boolean(cluster.isHub)

package/package.json

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