@andespindola/brainlink 0.1.0-beta.153 → 0.1.0-beta.155

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

@@ -11,7 +11,11 @@ const elements = {
   zoomIn: byId('zoomIn'),
   zoomOut: byId('zoomOut'),
   fit: byId('fit'),
+  releaseNode: byId('releaseNode'),
   reset: byId('reset'),
+  labels: byId('graphLabels'),
+  tooltip: byId('graphTooltip'),
+  miniMap: byId('miniMap'),
   contentDialog: byId('contentDialog'),
   contentTitle: byId('contentTitle'),
   contentPath: byId('contentPath'),
@@ -34,10 +38,15 @@ const state = {
     down: false,
     moved: false,
     dragging: false,
+    dragNodeId: '',
     x: 0,
     y: 0,
     startX: 0,
     startY: 0,
+    startWorldX: 0,
+    startWorldY: 0,
+    nodeStartX: 0,
+    nodeStartY: 0,
     worldAnchorX: 0,
     worldAnchorY: 0
   },
@@ -53,6 +62,18 @@ const state = {
   contextId: '',
   graphSignature: '',
   graphMode: 'near',
+  nodePositionsSignature: '',
+  nodePositionsScope: '',
+  serverNodePositionsScope: '',
+  nodePositions: new Map(),
+  hoveredNodeId: '',
+  focusedNodeIds: new Set(),
+  spatialIndex: {
+    key: '',
+    cells: new Map()
+  },
+  miniMapView: null,
+  overlayScheduled: false,
   chunk: {
     nodes: [],
     edges: []
@@ -63,7 +84,6 @@ const state = {
   fetchTimer: null,
   fetchAbortController: null,
   cameraSyncScheduled: false,
-  lastDragFetchAt: 0,
   lastWheelAt: 0,
   lastVisibleNodes: 0,
   lastVisibleEdges: 0,
@@ -80,6 +100,7 @@ const zoomRange = {
 
 const selectedAgentStorageKey = 'brainlink:selected-agent'
 const selectedContextStorageKey = 'brainlink:selected-context'
+const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
 
 const escapeHtml = (value) => String(value)
   .replaceAll('&', '&')
@@ -126,6 +147,151 @@ const writeStoredContext = (contextId) => {
   } catch {}
 }
 
+const nodePositionsStorageKey = () => [
+  nodePositionsStoragePrefix,
+  state.graphSignature || 'unknown',
+  state.agentId || 'all-agents',
+  state.contextId || 'all-contexts'
+].join(':')
+
+const readStoredNodePositions = () => {
+  try {
+    const raw = window.localStorage.getItem(nodePositionsStorageKey())
+    const parsed = raw ? JSON.parse(raw) : []
+    if (!Array.isArray(parsed)) {
+      return new Map()
+    }
+
+    return new Map(parsed.flatMap((entry) => {
+      const id = typeof entry?.[0] === 'string' ? entry[0] : ''
+      const x = Number(entry?.[1])
+      const y = Number(entry?.[2])
+      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
+    }))
+  } catch {
+    return new Map()
+  }
+}
+
+const ensureNodePositionsLoaded = () => {
+  const storageKey = nodePositionsStorageKey()
+  if (!state.graphSignature || (state.nodePositionsSignature === state.graphSignature && state.nodePositionsScope === storageKey)) {
+    return
+  }
+
+  state.nodePositions = readStoredNodePositions()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = storageKey
+}
+
+const writeStoredNodePositions = () => {
+  try {
+    if (!state.graphSignature) {
+      return
+    }
+
+    const entries = Array.from(state.nodePositions.entries())
+      .filter((entry) => Number.isFinite(entry[1]?.x) && Number.isFinite(entry[1]?.y))
+      .map((entry) => [entry[0], entry[1].x, entry[1].y])
+
+    if (entries.length === 0) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
+      return
+    }
+
+    window.localStorage.setItem(nodePositionsStorageKey(), JSON.stringify(entries))
+  } catch {}
+}
+
+const clearStoredNodePositions = () => {
+  try {
+    if (state.graphSignature) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
+    }
+  } catch {}
+  state.nodePositions = new Map()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = nodePositionsStorageKey()
+}
+
+const graphViewStateQuery = () => {
+  const params = new URLSearchParams({ signature: state.graphSignature })
+  if (state.agentId) {
+    params.set('agent', state.agentId)
+  }
+  if (state.contextId) {
+    params.set('context', state.contextId)
+  }
+  return params.toString()
+}
+
+const syncNodePositionsFromServer = async () => {
+  if (!state.graphSignature) {
+    return
+  }
+  const scope = nodePositionsStorageKey()
+  if (state.serverNodePositionsScope === scope) {
+    return
+  }
+  state.serverNodePositionsScope = scope
+
+  try {
+    const response = await fetch('/api/graph-view-state?' + graphViewStateQuery())
+    if (!response.ok) {
+      return
+    }
+    const payload = await response.json()
+    const positions = Array.isArray(payload?.positions) ? payload.positions : []
+    if (positions.length === 0) {
+      return
+    }
+    state.nodePositions = new Map(positions.flatMap((position) => {
+      const id = typeof position?.id === 'string' ? position.id : ''
+      const x = Number(position?.x)
+      const y = Number(position?.y)
+      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
+    }))
+    writeStoredNodePositions()
+  } catch {}
+}
+
+const persistNodePositionsToServer = () => {
+  if (!state.graphSignature) {
+    return
+  }
+
+  const positions = Array.from(state.nodePositions.entries()).map(([id, position]) => ({
+    id,
+    x: position.x,
+    y: position.y
+  }))
+
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ positions })
+  }).catch(() => {})
+}
+
+const clearNodePositionsOnServer = () => {
+  if (!state.graphSignature) {
+    return
+  }
+
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), { method: 'DELETE' }).catch(() => {})
+}
+
+const releaseSelectedNodePosition = () => {
+  if (!state.selectedNodeId || !state.nodePositions.has(state.selectedNodeId)) {
+    return
+  }
+
+  state.nodePositions.delete(state.selectedNodeId)
+  writeStoredNodePositions()
+  persistNodePositionsToServer()
+  scheduleChunkFetch({ fit: false })
+}
+
 const syncAgentInUrl = (agentId) => {
   try {
     const url = new URL(window.location.href)
@@ -237,6 +403,78 @@ const worldToScreen = (x, y) => ({
   y: y * state.camera.scale + state.camera.y
 })
 
+const spatialIndexKey = () => [
+  state.graphSignature,
+  state.camera.x.toFixed(1),
+  state.camera.y.toFixed(1),
+  state.camera.scale.toFixed(4),
+  normalizeList(state.chunk.nodes).length
+].join(':')
+
+const rebuildSpatialIndex = () => {
+  const key = spatialIndexKey()
+  if (state.spatialIndex.key === key) {
+    return
+  }
+
+  const cellSize = 44
+  const cells = new Map()
+  normalizeList(state.chunk.nodes).forEach((node) => {
+    const id = typeof node?.[0] === 'string' ? node[0] : ''
+    if (!id) return
+    const x = Number(node?.[2])
+    const y = Number(node?.[3])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return
+    const point = worldToScreen(x, y)
+    const cellX = Math.floor(point.x / cellSize)
+    const cellY = Math.floor(point.y / cellSize)
+    const key = cellX + ',' + cellY
+    const bucket = cells.get(key)
+    if (bucket) {
+      bucket.push(node)
+      return
+    }
+    cells.set(key, [node])
+  })
+
+  state.spatialIndex = { key, cells }
+}
+
+const spatialCandidates = (screenX, screenY) => {
+  rebuildSpatialIndex()
+  const cellSize = 44
+  const cellX = Math.floor(screenX / cellSize)
+  const cellY = Math.floor(screenY / cellSize)
+  const nodes = []
+
+  for (let y = cellY - 1; y <= cellY + 1; y += 1) {
+    for (let x = cellX - 1; x <= cellX + 1; x += 1) {
+      nodes.push(...(state.spatialIndex.cells.get(x + ',' + y) ?? []))
+    }
+  }
+
+  return nodes
+}
+
+const nodeByIdFromChunk = () => new Map(normalizeList(state.chunk.nodes).map((node) => [node[0], node]))
+
+const linkedNodeIds = (nodeId) => {
+  const ids = new Set(nodeId ? [nodeId] : [])
+  normalizeList(state.chunk.edges).forEach((edge) => {
+    if (edge?.[0] === nodeId && typeof edge?.[1] === 'string') ids.add(edge[1])
+    if (edge?.[1] === nodeId && typeof edge?.[0] === 'string') ids.add(edge[0])
+  })
+  return ids
+}
+
+const setFocusedNodeIds = (ids) => {
+  state.focusedNodeIds = ids
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'focus', ids: Array.from(ids) })
+  }
+  updateGraphOverlays()
+}
+
 const drawFallback = () => {
   if (state.rendererMode !== 'fallback' || !ctx2dFallback) {
     return
@@ -301,6 +539,7 @@ const updateTagCount = () => {
 }
 
 const updateWorkerCamera = () => {
+  updateGraphOverlays()
   if (!state.renderWorker || !state.workerReady) {
     return
   }
@@ -321,6 +560,7 @@ const updateWorkerCamera = () => {
 }
 
 const updateWorkerSize = () => {
+  updateGraphOverlays()
   if (!state.renderWorker || !state.workerReady) {
     return
   }
@@ -334,6 +574,164 @@ const updateWorkerSize = () => {
 
 const normalizeList = (items) => Array.isArray(items) ? items : []
 
+const applyManualNodePositions = (nodes) => normalizeList(nodes).map((node) => {
+  const id = typeof node?.[0] === 'string' ? node[0] : ''
+  const position = id ? state.nodePositions.get(id) : null
+  if (!position || !Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+    return node
+  }
+
+  const next = [...node]
+  next[2] = position.x
+  next[3] = position.y
+  return next
+})
+
+const updateNodePositionInChunk = (nodeId, x, y) => {
+  if (!nodeId || !Number.isFinite(x) || !Number.isFinite(y)) {
+    return
+  }
+
+  state.chunk = {
+    ...state.chunk,
+    nodes: normalizeList(state.chunk.nodes).map((node) => {
+      if (node?.[0] !== nodeId) {
+        return node
+      }
+      const next = [...node]
+      next[2] = x
+      next[3] = y
+      return next
+    })
+  }
+  state.spatialIndex.key = ''
+
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'move-node', id: nodeId, x, y })
+  }
+  updateGraphOverlays()
+}
+
+const showTooltip = (node, pointer) => {
+  if (!elements.tooltip || !node) {
+    return
+  }
+
+  elements.tooltip.hidden = false
+  elements.tooltip.innerHTML =
+    '<strong>' + escapeHtml(node[1] || node[0]) + '</strong>' +
+    '<small>' + escapeHtml(node[4] || node[5] || '') + '</small>'
+  elements.tooltip.style.left = Math.min(state.viewport.width - 24, pointer.x + 14) + 'px'
+  elements.tooltip.style.top = Math.min(state.viewport.height - 24, pointer.y + 14) + 'px'
+}
+
+const hideTooltip = () => {
+  if (elements.tooltip) {
+    elements.tooltip.hidden = true
+  }
+}
+
+const labelCandidates = () => {
+  const nodes = normalizeList(state.chunk.nodes)
+  const visible = nodes.filter((node) => {
+    const x = Number(node?.[2])
+    const y = Number(node?.[3])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return false
+    const point = worldToScreen(x, y)
+    return point.x >= -80 && point.x <= state.viewport.width + 80 && point.y >= -80 && point.y <= state.viewport.height + 80
+  })
+  const shouldShowMany = state.camera.scale >= 0.72 || visible.length <= 120
+  const focused = state.focusedNodeIds
+
+  return visible
+    .filter((node) => shouldShowMany || focused.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId || Number(node?.[7]) > 5.5)
+    .sort((left, right) => {
+      const leftFocused = focused.has(left[0]) || left[0] === state.hoveredNodeId || left[0] === state.selectedNodeId ? 1 : 0
+      const rightFocused = focused.has(right[0]) || right[0] === state.hoveredNodeId || right[0] === state.selectedNodeId ? 1 : 0
+      if (rightFocused !== leftFocused) return rightFocused - leftFocused
+      return Number(right?.[7] ?? 0) - Number(left?.[7] ?? 0)
+    })
+    .slice(0, state.camera.scale >= 0.72 ? 160 : 48)
+}
+
+const drawLabels = () => {
+  if (!elements.labels) {
+    return
+  }
+
+  elements.labels.innerHTML = labelCandidates().map((node) => {
+    const point = worldToScreen(Number(node[2]), Number(node[3]))
+    const focused = state.focusedNodeIds.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId
+    return '<span class="graph-label' + (focused ? ' is-focused' : '') + '" style="left:' +
+      point.x.toFixed(1) + 'px;top:' + point.y.toFixed(1) + 'px">' + escapeHtml(node[1] || node[0]) + '</span>'
+  }).join('')
+}
+
+const drawMiniMap = () => {
+  const miniMap = elements.miniMap
+  if (!(miniMap instanceof HTMLCanvasElement)) {
+    return
+  }
+  const nodes = normalizeList(state.chunk.nodes)
+  const ctx = miniMap.getContext('2d')
+  if (!ctx || nodes.length === 0) {
+    return
+  }
+
+  const ratio = window.devicePixelRatio || 1
+  const width = miniMap.clientWidth || 180
+  const height = miniMap.clientHeight || 120
+  miniMap.width = Math.floor(width * ratio)
+  miniMap.height = Math.floor(height * ratio)
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+  ctx.clearRect(0, 0, width, height)
+  ctx.fillStyle = 'rgba(13, 16, 20, 0.86)'
+  ctx.fillRect(0, 0, width, height)
+
+  const xs = nodes.map((node) => Number(node[2])).filter(Number.isFinite)
+  const ys = nodes.map((node) => Number(node[3])).filter(Number.isFinite)
+  const minX = Math.min(...xs)
+  const maxX = Math.max(...xs)
+  const minY = Math.min(...ys)
+  const maxY = Math.max(...ys)
+  const graphWidth = Math.max(1, maxX - minX)
+  const graphHeight = Math.max(1, maxY - minY)
+  const scale = Math.min((width - 18) / graphWidth, (height - 18) / graphHeight)
+  const offsetX = (width - graphWidth * scale) / 2
+  const offsetY = (height - graphHeight * scale) / 2
+  const toMini = (x, y) => ({
+    x: offsetX + (x - minX) * scale,
+    y: offsetY + (y - minY) * scale
+  })
+  state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
+
+  ctx.fillStyle = 'rgba(174, 184, 197, 0.62)'
+  nodes.forEach((node) => {
+    const point = toMini(Number(node[2]), Number(node[3]))
+    ctx.fillRect(point.x - 1, point.y - 1, 2, 2)
+  })
+
+  const worldTopLeft = screenToWorld(0, 0)
+  const worldBottomRight = screenToWorld(state.viewport.width, state.viewport.height)
+  const topLeft = toMini(Math.min(worldTopLeft.x, worldBottomRight.x), Math.min(worldTopLeft.y, worldBottomRight.y))
+  const bottomRight = toMini(Math.max(worldTopLeft.x, worldBottomRight.x), Math.max(worldTopLeft.y, worldBottomRight.y))
+  ctx.strokeStyle = 'rgba(53, 208, 162, 0.86)'
+  ctx.lineWidth = 1
+  ctx.strokeRect(topLeft.x, topLeft.y, Math.max(3, bottomRight.x - topLeft.x), Math.max(3, bottomRight.y - topLeft.y))
+}
+
+const updateGraphOverlays = () => {
+  if (state.overlayScheduled) {
+    return
+  }
+  state.overlayScheduled = true
+  requestAnimationFrame(() => {
+    state.overlayScheduled = false
+    drawLabels()
+    drawMiniMap()
+  })
+}
+
 const list = (items) => {
   const rows = normalizeList(items)
   if (rows.length === 0) {
@@ -442,6 +840,7 @@ const loadNodeDetails = async (nodeId) => {
 
   const node = payload.node
   state.selectedNodeId = node.id
+  setFocusedNodeIds(linkedNodeIds(node.id))
 
   if (state.renderWorker && state.workerReady) {
     state.renderWorker.postMessage({ type: 'select', id: node.id })
@@ -552,11 +951,16 @@ const fetchChunk = async ({ fit } = { fit: false }) => {
   }
 
   state.graphSignature = typeof chunk.signature === 'string' ? chunk.signature : ''
+  ensureNodePositionsLoaded()
+  await syncNodePositionsFromServer()
   state.graphMode = typeof chunk.mode === 'string' ? chunk.mode : 'near'
+  const chunkNodes = applyManualNodePositions(chunk.nodes)
   state.chunk = {
-    nodes: normalizeList(chunk.nodes),
+    nodes: chunkNodes,
     edges: normalizeList(chunk.edges)
   }
+  state.spatialIndex.key = ''
+  const renderChunk = { ...chunk, nodes: chunkNodes }
   state.totals = {
     nodes: Number.isFinite(chunk?.totals?.nodes) ? Number(chunk.totals.nodes) : state.chunk.nodes.length,
     edges: Number.isFinite(chunk?.totals?.edges) ? Number(chunk.totals.edges) : state.chunk.edges.length
@@ -570,10 +974,11 @@ const fetchChunk = async ({ fit } = { fit: false }) => {
   }
 
   if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'chunk', chunk })
+    state.renderWorker.postMessage({ type: 'chunk', chunk: renderChunk })
     state.renderWorker.postMessage({ type: 'select', id: state.selectedNodeId })
   }
 
+  updateGraphOverlays()
   drawFallback()
 }
 
@@ -584,7 +989,7 @@ const scheduleChunkFetch = ({ fit } = { fit: false }) => {
 
   const now = performance.now()
   const recentlyWheeling = now - state.lastWheelAt < 180
-  const delay = fit ? 0 : (state.pointer.down ? 120 : (recentlyWheeling ? 140 : 48))
+  const delay = fit ? 0 : (state.pointer.down ? 260 : (recentlyWheeling ? 160 : 48))
   state.fetchTimer = setTimeout(() => {
     state.fetchTimer = null
     fetchChunk({ fit }).catch((error) => {
@@ -605,13 +1010,13 @@ const setViewportFromCanvas = () => {
   drawFallback()
 }
 
-const pickFallbackNodeId = (screenX, screenY) => {
-  const nodes = normalizeList(state.chunk.nodes)
+const pickFallbackNode = (screenX, screenY) => {
+  const nodes = spatialCandidates(screenX, screenY)
   if (nodes.length === 0) {
-    return ''
+    return null
   }
 
-  let bestId = ''
+  let bestNode = null
   let bestDistance = Infinity
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
@@ -626,11 +1031,16 @@ const pickFallbackNodeId = (screenX, screenY) => {
     const distance = Math.hypot(screenX - point.x, screenY - point.y)
     if (distance <= radius && distance < bestDistance) {
       bestDistance = distance
-      bestId = id
+      bestNode = node
     }
   }
 
-  return bestId
+  return bestNode
+}
+
+const pickFallbackNodeId = (screenX, screenY) => {
+  const node = pickFallbackNode(screenX, screenY)
+  return typeof node?.[0] === 'string' ? node[0] : ''
 }
 
 const pickAt = (screenX, screenY) => {
@@ -686,14 +1096,23 @@ const setupInput = () => {
 
   canvas.addEventListener('pointerdown', (event) => {
     const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = candidateNode?.[6] === 'node' && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
+    const candidateX = Number(candidateNode?.[2])
+    const candidateY = Number(candidateNode?.[3])
+    const world = screenToWorld(pointer.x, pointer.y)
     state.pointer.down = true
     state.pointer.moved = false
     state.pointer.dragging = false
+    state.pointer.dragNodeId = candidateNodeId
     state.pointer.x = pointer.x
     state.pointer.y = pointer.y
     state.pointer.startX = pointer.x
     state.pointer.startY = pointer.y
-    const world = screenToWorld(pointer.x, pointer.y)
+    state.pointer.startWorldX = world.x
+    state.pointer.startWorldY = world.y
+    state.pointer.nodeStartX = candidateNodeId && Number.isFinite(candidateX) ? candidateX : 0
+    state.pointer.nodeStartY = candidateNodeId && Number.isFinite(candidateY) ? candidateY : 0
     state.pointer.worldAnchorX = world.x
     state.pointer.worldAnchorY = world.y
     canvas.setPointerCapture(event.pointerId)
@@ -709,26 +1128,45 @@ const setupInput = () => {
       if (distanceFromStart >= dragActivationDistance) {
         state.pointer.moved = true
         state.pointer.dragging = true
+        canvas.classList.toggle('is-node-dragging', Boolean(state.pointer.dragNodeId))
       }
       if (!state.pointer.dragging) {
         state.pointer.x = pointer.x
         state.pointer.y = pointer.y
         return
       }
+      if (state.pointer.dragNodeId) {
+        const world = screenToWorld(pointer.x, pointer.y)
+        const x = state.pointer.nodeStartX + world.x - state.pointer.startWorldX
+        const y = state.pointer.nodeStartY + world.y - state.pointer.startWorldY
+        state.nodePositions.set(state.pointer.dragNodeId, { x, y })
+        updateNodePositionInChunk(state.pointer.dragNodeId, x, y)
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        drawFallback()
+        return
+      }
       state.camera.x += dx
       state.camera.y += dy
       state.pointer.x = pointer.x
       state.pointer.y = pointer.y
       updateWorkerCamera()
-      const now = performance.now()
-      if (now - state.lastDragFetchAt > 180) {
-        state.lastDragFetchAt = now
-        scheduleChunkFetch()
-      }
       drawFallback()
       return
     }
 
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = hovered?.[6] === 'node' && typeof hovered?.[0] === 'string' ? hovered[0] : ''
+    if (state.hoveredNodeId !== hoveredId) {
+      state.hoveredNodeId = hoveredId
+      canvas.classList.toggle('is-node-hover', Boolean(hoveredId))
+      updateGraphOverlays()
+    }
+    if (hoveredId) {
+      showTooltip(hovered, pointer)
+    } else {
+      hideTooltip()
+    }
   })
 
   canvas.addEventListener('pointerup', (event) => {
@@ -736,19 +1174,49 @@ const setupInput = () => {
     const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
     const shouldPick = !state.pointer.dragging && distanceFromStart < dragActivationDistance
     const shouldRefreshAfterDrag = state.pointer.dragging
+    const shouldPersistNodePosition = state.pointer.dragging && Boolean(state.pointer.dragNodeId)
     state.pointer.down = false
     state.pointer.dragging = false
+    canvas.classList.remove('is-node-dragging')
+    state.pointer.dragNodeId = ''
     canvas.releasePointerCapture(event.pointerId)
 
     if (shouldPick) {
       pickAt(pointer.x, pointer.y)
       return
     }
+    if (shouldPersistNodePosition) {
+      writeStoredNodePositions()
+      persistNodePositionsToServer()
+      return
+    }
     if (shouldRefreshAfterDrag) {
       scheduleChunkFetch()
     }
   })
 
+  canvas.addEventListener('pointerleave', () => {
+    state.hoveredNodeId = ''
+    canvas.classList.remove('is-node-hover')
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  elements.miniMap.addEventListener('click', (event) => {
+    if (!state.miniMapView) {
+      return
+    }
+    const rect = elements.miniMap.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+    const worldX = state.miniMapView.minX + (x - state.miniMapView.offsetX) / state.miniMapView.scale
+    const worldY = state.miniMapView.minY + (y - state.miniMapView.offsetY) / state.miniMapView.scale
+    state.camera.x = state.viewport.width / 2 - worldX * state.camera.scale
+    state.camera.y = state.viewport.height / 2 - worldY * state.camera.scale
+    updateWorkerCamera()
+    scheduleChunkFetch()
+  })
+
   canvas.addEventListener('dblclick', (event) => {
     const pointer = resolvePointer(event)
     zoomAtPoint(pointer.x, pointer.y, 1.065)
@@ -783,7 +1251,13 @@ const setupControls = () => {
     scheduleChunkFetch()
   })
 
+  elements.releaseNode.addEventListener('click', () => {
+    releaseSelectedNodePosition()
+  })
+
   elements.reset.addEventListener('click', () => {
+    clearStoredNodePositions()
+    clearNodePositionsOnServer()
     state.camera = { x: 0, y: 0, scale: 0.22 }
     updateWorkerCamera()
     scheduleChunkFetch({ fit: true })