@andespindola/brainlink 1.0.5 → 1.0.7

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

@@ -0,0 +1,202 @@
+export const createInputJs = () => `
+const resolvePointer = (event) => {
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+const setupInput = () => {
+  const dragActivationDistance = 6
+  const resetPointerState = (pointerId = null) => {
+    state.pointer.down = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = ''
+    canvas.classList.remove('is-node-dragging')
+    if (pointerId !== null) {
+      try {
+        if (canvas.hasPointerCapture(pointerId)) {
+          canvas.releasePointerCapture(pointerId)
+        }
+      } catch {}
+    }
+  }
+
+  canvas.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    state.lastWheelAt = performance.now()
+    const pointer = resolvePointer(event)
+    const exponent = Math.max(-0.05, Math.min(0.05, -event.deltaY * 0.001))
+    zoomAtPoint(pointer.x, pointer.y, Math.exp(exponent))
+  }, { passive: false })
+
+  canvas.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
+    const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = isRealGraphNode(candidateNode) && 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
+    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
+    try {
+      canvas.setPointerCapture(event.pointerId)
+    } catch {}
+  })
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (state.pointer.down) {
+      event.preventDefault()
+    }
+    const pointer = resolvePointer(event)
+
+    if (state.pointer.down) {
+      const dx = pointer.x - state.pointer.x
+      const dy = pointer.y - state.pointer.y
+      const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
+      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()
+      drawFallback()
+      return
+    }
+
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = isRealGraphNode(hovered) && 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) => {
+    const pointer = resolvePointer(event)
+    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)
+    resetPointerState(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()
+  })
+
+  canvas.addEventListener('pointercancel', (event) => {
+    resetPointerState(event.pointerId)
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  canvas.addEventListener('lostpointercapture', () => {
+    resetPointerState()
+  })
+
+  // Listeners globais (mini mapa e teclado) só podem ser ligados uma vez —
+  // setupInput pode ser re-executado ao trocar o canvas no fallback.
+  if (!inputGlobalsBound) {
+    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()
+    })
+
+    window.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !elements.uploadDialog.hidden) {
+        closeUploadDialog()
+        return
+      }
+      if (event.key === 'Escape' && !elements.contentDialog.hidden) {
+        closeContentDialog()
+        return
+      }
+      if (event.key === '+') {
+        zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
+        return
+      }
+      if (event.key === '-') {
+        zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
+        return
+      }
+      if (event.key === '0') {
+        scheduleChunkFetch({ fit: true })
+      }
+    })
+
+    inputGlobalsBound = true
+  }
+
+  canvas.addEventListener('dblclick', (event) => {
+    const pointer = resolvePointer(event)
+    zoomAtPoint(pointer.x, pointer.y, 1.065)
+  })
+}
+`;

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

@@ -0,0 +1,191 @@
+export const createNodeDetailsJs = () => `
+const list = (items) => {
+  const rows = normalizeList(items)
+  if (rows.length === 0) {
+    return '<li><small>No links found.</small></li>'
+  }
+  return rows
+    .map((item) => {
+      const title = typeof item?.title === 'string' ? item.title : 'Untitled'
+      const id = typeof item?.id === 'string' ? item.id : ''
+      const path = typeof item?.path === 'string' ? item.path : ''
+      const meta = item?.weight ? ' · weight ' + escapeHtml(item.weight) + ' · ' + escapeHtml(item.priority || 'normal') : ''
+      return '<li>' +
+        (id ? '<button type="button" data-node-id="' + escapeHtml(id) + '">' + escapeHtml(title) + '</button>' : escapeHtml(title)) +
+        '<small>' + escapeHtml(path) + meta + '</small>' +
+        '</li>'
+    })
+    .join('')
+}
+
+const buildFacts = (node, outgoingCount, incomingCount) => {
+  const content = typeof node?.content === 'string' ? node.content : ''
+  const words = content.trim().length > 0 ? content.trim().split(/\\s+/).length : 0
+  return [
+    { label: 'Agent', value: typeof node?.agentId === 'string' && node.agentId ? node.agentId : 'shared' },
+    { label: 'Words', value: String(words) },
+    { label: 'Chars', value: String(content.length) },
+    { label: 'Outgoing', value: String(outgoingCount) },
+    { label: 'Backlinks', value: String(incomingCount) }
+  ]
+}
+
+const listFacts = (facts) => facts
+  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
+  .join('')
+
+const listContextLinks = (links) => {
+  if (!Array.isArray(links) || links.length === 0) {
+    return '<li><small>No context links found.</small></li>'
+  }
+  return links
+    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
+    .join('')
+}
+
+const nodeContextLinks = (node, outgoing) => {
+  const titles = Array.isArray(node?.contextLinks) ? node.contextLinks : []
+  const outgoingByTitle = new Map(normalizeList(outgoing).map((link) => [String(link.title || '').toLowerCase(), link]))
+
+  return titles
+    .map((title) => {
+      const match = outgoingByTitle.get(String(title).toLowerCase())
+      return {
+        title,
+        priority: match?.priority || 'normal'
+      }
+    })
+    .filter((link) => typeof link.title === 'string' && link.title.trim().length > 0)
+}
+
+const linkedNodes = (node) => {
+  const nodeById = new Map((state.chunk.nodes || []).map((item) => [item[0], item]))
+  const edges = normalizeList(state.chunk.edges)
+
+  const outgoing = []
+  const incoming = []
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (edge[0] === node.id) {
+      const target = nodeById.get(edge[1])
+      if (target) {
+        outgoing.push({ id: target[0], title: target[1], path: target[4] || '', weight: edge[2], priority: edge[3] })
+      }
+    }
+    if (edge[1] === node.id) {
+      const source = nodeById.get(edge[0])
+      if (source) {
+        incoming.push({ id: source[0], title: source[1], path: source[4] || '', weight: edge[2], priority: edge[3] })
+      }
+    }
+  }
+
+  return { outgoing, incoming }
+}
+
+const openContentDialog = () => {
+  elements.contentDialog.hidden = false
+}
+
+const closeContentDialog = () => {
+  elements.contentDialog.hidden = true
+}
+
+const selectedNode = () => {
+  if (!state.selectedNodeId) {
+    return null
+  }
+
+  const packed = nodeByIdFromChunk().get(state.selectedNodeId)
+  if (!packed) {
+    return null
+  }
+
+  return {
+    id: packed[0],
+    title: packed[1],
+    path: packed[4] || ''
+  }
+}
+
+const copySelectedWikiLink = async () => {
+  const node = selectedNode()
+  if (!node) {
+    elements.contentActionStatus.textContent = 'Select a note first.'
+    return
+  }
+
+  const value = '[[' + node.title + ']]'
+  try {
+    await navigator.clipboard.writeText(value)
+    elements.contentActionStatus.textContent = 'Copied ' + value
+  } catch {
+    elements.contentActionStatus.textContent = value
+  }
+}
+
+const loadSelectedLinkSuggestions = async () => {
+  const content = elements.contentBody.textContent || ''
+  if (!content.trim()) {
+    elements.contentActionStatus.textContent = 'Selected note has no content.'
+    return
+  }
+
+  elements.contentActionStatus.textContent = 'Loading suggestions...'
+  const response = await fetch('/api/suggest-links?limit=5&content=' + encodeURIComponent(content.slice(0, 2000)) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load link suggestions')
+  }
+  const payload = await response.json()
+  const suggestions = Array.isArray(payload.suggestions) ? payload.suggestions : []
+  elements.contentLinkSuggestions.innerHTML = suggestions.length > 0
+    ? suggestions.map((item) => '<li><button type="button" data-title="' + escapeHtml(item.title) + '">[[' + escapeHtml(item.title) + ']]</button></li>').join('')
+    : '<li>No strong suggestions</li>'
+  elements.contentActionStatus.textContent = suggestions.length > 0 ? 'Suggested Context Links' : 'No strong suggestions found.'
+}
+
+const loadNodeDetails = async (nodeId) => {
+  if (!nodeId) {
+    return
+  }
+
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
+  }
+
+  const payload = await response.json()
+  if (!payload || typeof payload !== 'object' || !payload.node) {
+    throw new Error('Invalid graph node payload')
+  }
+
+  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 })
+  }
+
+  elements.contentTitle.textContent = node.title || 'Untitled'
+  elements.contentPath.textContent = node.path || ''
+
+  const tags = Array.isArray(node.tags) ? node.tags : []
+  elements.contentTags.innerHTML = tags.length > 0
+    ? tags.map((tag) => '<span>' + escapeHtml(tag) + '</span>').join('')
+    : '<span>No tags</span>'
+
+  const related = linkedNodes(node)
+  const contextLinks = nodeContextLinks(node, related.outgoing)
+  const facts = buildFacts(node, related.outgoing.length, related.incoming.length)
+  elements.contentFacts.innerHTML = listFacts(facts)
+  elements.contentContextLinks.innerHTML = listContextLinks(contextLinks)
+  elements.contentOutgoing.innerHTML = list(related.outgoing)
+  elements.contentIncoming.innerHTML = list(related.incoming)
+  elements.contentBody.textContent = typeof node.content === 'string' ? node.content : ''
+  elements.contentActionStatus.textContent = ''
+  elements.contentLinkSuggestions.innerHTML = ''
+
+  openContentDialog()
+}
+`;

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

@@ -0,0 +1,296 @@
+export const createRenderingJs = () => `
+const drawFallback = () => {
+  if (state.rendererMode !== 'fallback') {
+    return
+  }
+  ctx2dFallback = ctx2dFallback ?? canvas.getContext('2d')
+  if (!ctx2dFallback) {
+    return
+  }
+  const width = state.viewport.width
+  const height = state.viewport.height
+  const ratio = state.viewport.ratio
+  canvas.width = Math.floor(width * ratio)
+  canvas.height = Math.floor(height * ratio)
+  ctx2dFallback.setTransform(ratio, 0, 0, ratio, 0, 0)
+  ctx2dFallback.fillStyle = '#08131d'
+  ctx2dFallback.fillRect(0, 0, width, height)
+
+  const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
+  const edges = Array.isArray(state.chunk.edges) ? state.chunk.edges : []
+  const nodeById = new Map()
+  for (let i = 0; i < nodes.length; i += 1) {
+    nodeById.set(nodes[i][0], nodes[i])
+  }
+
+  ctx2dFallback.strokeStyle = 'rgba(151,181,212,0.18)'
+  ctx2dFallback.lineWidth = 1
+  for (let i = 0; i < edges.length; i += 1) {
+    const edge = edges[i]
+    const source = nodeById.get(edge[0])
+    const target = nodeById.get(edge[1])
+    if (!source || !target) continue
+    const from = worldToScreen(source[2], source[3])
+    const to = worldToScreen(target[2], target[3])
+    ctx2dFallback.beginPath()
+    ctx2dFallback.moveTo(from.x, from.y)
+    ctx2dFallback.lineTo(to.x, to.y)
+    ctx2dFallback.stroke()
+  }
+
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i]
+    const p = worldToScreen(node[2], node[3])
+    const selected = state.selectedNodeId === node[0]
+    const color = segmentColor(node[5] || node[4] || node[1])
+    const radius = Math.max(3.2, Math.min(16.5, 5 + node[7] * 0.65))
+
+    ctx2dFallback.beginPath()
+    ctx2dFallback.fillStyle = selected ? '#edf4ff' : color
+    ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
+    ctx2dFallback.fill()
+  }
+
+  ctx2dFallback.fillStyle = '#97a9bd'
+  ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
+  ctx2dFallback.textAlign = 'center'
+  ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
+}
+
+const updateTotals = () => {
+  elements.nodeCount.textContent = String(state.totals.nodes)
+  elements.edgeCount.textContent = String(state.totals.edges)
+}
+
+const updateWorkerCamera = () => {
+  updateGraphOverlays()
+  if (!state.renderWorker || !state.workerReady) {
+    return
+  }
+  if (state.cameraSyncScheduled) {
+    return
+  }
+  state.cameraSyncScheduled = true
+  requestAnimationFrame(() => {
+    state.cameraSyncScheduled = false
+    if (!state.renderWorker || !state.workerReady) {
+      return
+    }
+    state.renderWorker.postMessage({
+      type: 'camera',
+      camera: state.camera
+    })
+  })
+}
+
+const updateWorkerSize = () => {
+  updateGraphOverlays()
+  if (!state.renderWorker || !state.workerReady) {
+    return
+  }
+  state.renderWorker.postMessage({
+    type: 'resize',
+    width: state.viewport.width,
+    height: state.viewport.height,
+    devicePixelRatio: state.viewport.ratio
+  })
+}
+
+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 focusNodeInViewport = (nodeId, nextScale = null) => {
+  const node = nodeByIdFromChunk().get(nodeId)
+  if (!node) {
+    return false
+  }
+
+  const x = Number(node[2])
+  const y = Number(node[3])
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return false
+  }
+
+  if (Number.isFinite(nextScale)) {
+    state.camera.scale = clampScale(Number(nextScale))
+  }
+  state.camera.x = state.viewport.width / 2 - x * state.camera.scale
+  state.camera.y = state.viewport.height / 2 - y * state.camera.scale
+  updateWorkerCamera()
+  scheduleChunkFetch()
+  return true
+}
+
+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(8, 19, 29, 0.88)'
+  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(90, 168, 255, 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(90, 168, 255, 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 shouldDeferGraphOverlays = () => state.pointer.down || performance.now() - state.lastWheelAt < 150
+
+const updateGraphOverlays = () => {
+  if (state.overlayScheduled) {
+    return
+  }
+  state.overlayScheduled = true
+  requestAnimationFrame(() => {
+    state.overlayScheduled = false
+    if (shouldDeferGraphOverlays()) {
+      elements.labels?.classList.add('is-stale')
+      if (!state.overlayIdleTimer) {
+        state.overlayIdleTimer = setTimeout(() => {
+          state.overlayIdleTimer = null
+          updateGraphOverlays()
+        }, 170)
+      }
+      return
+    }
+    elements.labels?.classList.remove('is-stale')
+    drawLabels()
+    if (state.miniMapDirty) {
+      drawMiniMap()
+      state.miniMapDirty = false
+    }
+  })
+}
+`;