@andespindola/brainlink 0.1.0-beta.142 → 0.1.0-beta.143

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

@@ -0,0 +1,534 @@
+export const createClientRenderWorkerJs = () => `let canvas = null
+let gl = null
+let viewportWidth = 320
+let viewportHeight = 320
+let devicePixelRatio = 1
+const camera = { x: 0, y: 0, scale: 1 }
+const state = {
+  nodeCount: 0,
+  edgeCount: 0,
+  ids: [],
+  titles: [],
+  kinds: [],
+  x: new Float32Array(0),
+  y: new Float32Array(0),
+  relevance: new Float32Array(0),
+  radius: new Float32Array(0),
+  visible: new Uint8Array(0),
+  highlighted: new Uint8Array(0),
+  selected: new Uint8Array(0),
+  edgeSource: new Uint32Array(0),
+  edgeTarget: new Uint32Array(0),
+  edgeWeight: new Float32Array(0)
+}
+const nodeIndexById = new Map()
+const highlightedIds = new Set()
+let selectedNodeId = null
+let dirty = true
+let running = false
+let hoverX = null
+let hoverY = null
+let lastFrameAt = 0
+
+const defaultTheme = {
+  node: [0.68, 0.72, 0.78, 1],
+  nodeCluster: [0.42, 0.76, 0.92, 1],
+  nodeHighlight: [0.95, 0.76, 0.22, 1],
+  nodeSelected: [0.99, 0.99, 1, 1],
+  edge: [0.58, 0.64, 0.74, 0.24],
+  edgeHeavy: [0.78, 0.84, 0.92, 0.44],
+  clear: [0.05, 0.06, 0.08, 1]
+}
+
+const theme = { ...defaultTheme }
+
+const createShader = (type, source) => {
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+const createProgram = (vertexSource, fragmentSource) => {
+  const vertexShader = createShader(gl.VERTEX_SHADER, vertexSource)
+  const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentSource)
+  if (!vertexShader || !fragmentShader) return null
+  const program = gl.createProgram()
+  if (!program) return null
+  gl.attachShader(program, vertexShader)
+  gl.attachShader(program, fragmentShader)
+  gl.linkProgram(program)
+  gl.deleteShader(vertexShader)
+  gl.deleteShader(fragmentShader)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program)
+    return null
+  }
+  return program
+}
+
+let lineProgram = null
+let pointProgram = null
+let lineBuffer = null
+let pointPositionBuffer = null
+let pointSizeBuffer = null
+let linePositionLocation = -1
+let lineResolutionLocation = null
+let lineColorLocation = null
+let pointPositionLocation = -1
+let pointSizeLocation = -1
+let pointResolutionLocation = null
+let pointColorLocation = null
+
+const initWebGl = () => {
+  if (!canvas) {
+    return false
+  }
+
+  gl = canvas.getContext('webgl2', { alpha: false, antialias: true, depth: false, stencil: false }) ||
+    canvas.getContext('webgl', { alpha: false, antialias: true, depth: false, stencil: false })
+
+  if (!gl) {
+    return false
+  }
+
+  lineProgram = createProgram(
+    'attribute vec2 a_position; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); }',
+    'precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }'
+  )
+
+  pointProgram = createProgram(
+    'attribute vec2 a_position; attribute float a_size; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); gl_PointSize = a_size; }',
+    'precision mediump float; uniform vec4 u_color; void main() { vec2 center = gl_PointCoord - vec2(0.5); float distanceFromCenter = length(center); if (distanceFromCenter > 0.5) discard; float alpha = smoothstep(0.5, 0.38, distanceFromCenter); gl_FragColor = vec4(u_color.rgb, u_color.a * alpha); }'
+  )
+
+  if (!lineProgram || !pointProgram) {
+    return false
+  }
+
+  lineBuffer = gl.createBuffer()
+  pointPositionBuffer = gl.createBuffer()
+  pointSizeBuffer = gl.createBuffer()
+  if (!lineBuffer || !pointPositionBuffer || !pointSizeBuffer) {
+    return false
+  }
+
+  linePositionLocation = gl.getAttribLocation(lineProgram, 'a_position')
+  lineResolutionLocation = gl.getUniformLocation(lineProgram, 'u_resolution')
+  lineColorLocation = gl.getUniformLocation(lineProgram, 'u_color')
+  pointPositionLocation = gl.getAttribLocation(pointProgram, 'a_position')
+  pointSizeLocation = gl.getAttribLocation(pointProgram, 'a_size')
+  pointResolutionLocation = gl.getUniformLocation(pointProgram, 'u_resolution')
+  pointColorLocation = gl.getUniformLocation(pointProgram, 'u_color')
+
+  gl.enable(gl.BLEND)
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+  gl.disable(gl.DEPTH_TEST)
+
+  return true
+}
+
+const resizeCanvas = (width, height, ratio) => {
+  viewportWidth = Math.max(320, Number.isFinite(width) ? width : viewportWidth)
+  viewportHeight = Math.max(320, Number.isFinite(height) ? height : viewportHeight)
+  devicePixelRatio = Math.max(1, Number.isFinite(ratio) ? ratio : devicePixelRatio)
+
+  if (!canvas) return
+
+  canvas.width = Math.floor(viewportWidth * devicePixelRatio)
+  canvas.height = Math.floor(viewportHeight * devicePixelRatio)
+  if (gl) {
+    gl.viewport(0, 0, canvas.width, canvas.height)
+  }
+  dirty = true
+}
+
+const toScreenPoint = (x, y) => {
+  const sx = (x * camera.scale + camera.x) * devicePixelRatio
+  const sy = (y * camera.scale + camera.y) * devicePixelRatio
+  return [sx, sy]
+}
+
+const ensureNodeCapacity = (count) => {
+  if (state.x.length >= count) {
+    return
+  }
+
+  const nextCapacity = Math.max(count, Math.ceil(state.x.length * 1.5), 512)
+  state.x = new Float32Array(nextCapacity)
+  state.y = new Float32Array(nextCapacity)
+  state.relevance = new Float32Array(nextCapacity)
+  state.radius = new Float32Array(nextCapacity)
+  state.visible = new Uint8Array(nextCapacity)
+  state.highlighted = new Uint8Array(nextCapacity)
+  state.selected = new Uint8Array(nextCapacity)
+}
+
+const ensureEdgeCapacity = (count) => {
+  if (state.edgeSource.length >= count) {
+    return
+  }
+
+  const nextCapacity = Math.max(count, Math.ceil(state.edgeSource.length * 1.5), 1024)
+  state.edgeSource = new Uint32Array(nextCapacity)
+  state.edgeTarget = new Uint32Array(nextCapacity)
+  state.edgeWeight = new Float32Array(nextCapacity)
+}
+
+const nodeRadius = (relevance, kind) => {
+  const base = kind === 'cluster' ? 7.8 : 4.6
+  const modifier = Math.min(4.8, Math.max(0, relevance * 0.55))
+  return base + modifier
+}
+
+const loadChunk = (chunk) => {
+  const nodes = Array.isArray(chunk?.nodes) ? chunk.nodes : []
+  const edges = Array.isArray(chunk?.edges) ? chunk.edges : []
+
+  ensureNodeCapacity(nodes.length)
+  nodeIndexById.clear()
+  state.ids = new Array(nodes.length)
+  state.titles = new Array(nodes.length)
+  state.kinds = new Array(nodes.length)
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const row = nodes[index]
+    const id = typeof row?.[0] === 'string' ? row[0] : ''
+    if (!id) {
+      continue
+    }
+    const title = typeof row?.[1] === 'string' ? row[1] : id
+    const x = Number.isFinite(row?.[2]) ? Number(row[2]) : 0
+    const y = Number.isFinite(row?.[3]) ? Number(row[3]) : 0
+    const kind = row?.[6] === 'cluster' ? 'cluster' : 'node'
+    const relevance = Number.isFinite(row?.[7]) ? Number(row[7]) : 0
+
+    state.ids[index] = id
+    state.titles[index] = title
+    state.kinds[index] = kind
+    state.x[index] = x
+    state.y[index] = y
+    state.relevance[index] = relevance
+    state.radius[index] = nodeRadius(relevance, kind)
+    state.visible[index] = 0
+    state.highlighted[index] = highlightedIds.has(id) ? 1 : 0
+    state.selected[index] = selectedNodeId === id ? 1 : 0
+    nodeIndexById.set(id, index)
+  }
+
+  state.nodeCount = nodes.length
+
+  ensureEdgeCapacity(edges.length)
+  let edgeCount = 0
+  for (let index = 0; index < edges.length; index += 1) {
+    const row = edges[index]
+    const sourceId = typeof row?.[0] === 'string' ? row[0] : ''
+    const targetId = typeof row?.[1] === 'string' ? row[1] : ''
+    const source = nodeIndexById.get(sourceId)
+    const target = nodeIndexById.get(targetId)
+    if (source === undefined || target === undefined || source === target) {
+      continue
+    }
+    state.edgeSource[edgeCount] = source
+    state.edgeTarget[edgeCount] = target
+    state.edgeWeight[edgeCount] = Number.isFinite(row?.[2]) ? Number(row[2]) : 1
+    edgeCount += 1
+  }
+
+  state.edgeCount = edgeCount
+  dirty = true
+}
+
+const cullVisibleNodes = () => {
+  const minX = -280
+  const minY = -280
+  const maxX = viewportWidth + 280
+  const maxY = viewportHeight + 280
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    const radius = state.radius[index] * camera.scale
+    const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+    const screenX = sx / devicePixelRatio
+    const screenY = sy / devicePixelRatio
+    state.visible[index] = screenX + radius >= minX && screenX - radius <= maxX && screenY + radius >= minY && screenY - radius <= maxY ? 1 : 0
+  }
+}
+
+const drawEdges = () => {
+  if (!gl || state.edgeCount === 0) return
+
+  const positions = []
+  for (let index = 0; index < state.edgeCount; index += 1) {
+    const source = state.edgeSource[index]
+    const target = state.edgeTarget[index]
+    if (state.visible[source] === 0 && state.visible[target] === 0) {
+      continue
+    }
+    const [sx, sy] = toScreenPoint(state.x[source], state.y[source])
+    const [tx, ty] = toScreenPoint(state.x[target], state.y[target])
+    positions.push(sx, sy, tx, ty)
+  }
+
+  if (positions.length === 0) return
+
+  gl.useProgram(lineProgram)
+  gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(linePositionLocation)
+  gl.vertexAttribPointer(linePositionLocation, 2, gl.FLOAT, false, 0, 0)
+  gl.uniform2f(lineResolutionLocation, canvas.width, canvas.height)
+  gl.uniform4fv(lineColorLocation, state.nodeCount > 4000 ? theme.edge : theme.edgeHeavy)
+  gl.lineWidth(1)
+  gl.drawArrays(gl.LINES, 0, positions.length / 2)
+}
+
+const drawNodeLayer = (predicate, color, radiusBoost = 1) => {
+  if (!gl || state.nodeCount === 0) return
+
+  const positions = []
+  const sizes = []
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    if (!predicate(index)) continue
+    const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+    positions.push(sx, sy)
+    sizes.push(Math.max(1.2, state.radius[index] * camera.scale * devicePixelRatio * radiusBoost))
+  }
+
+  if (positions.length === 0) return
+
+  gl.useProgram(pointProgram)
+  gl.bindBuffer(gl.ARRAY_BUFFER, pointPositionBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(pointPositionLocation)
+  gl.vertexAttribPointer(pointPositionLocation, 2, gl.FLOAT, false, 0, 0)
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(sizes), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(pointSizeLocation)
+  gl.vertexAttribPointer(pointSizeLocation, 1, gl.FLOAT, false, 0, 0)
+
+  gl.uniform2f(pointResolutionLocation, canvas.width, canvas.height)
+  gl.uniform4fv(pointColorLocation, color)
+  gl.drawArrays(gl.POINTS, 0, positions.length / 2)
+}
+
+const clear = () => {
+  if (!gl || !canvas) return
+  gl.viewport(0, 0, canvas.width, canvas.height)
+  gl.clearColor(theme.clear[0], theme.clear[1], theme.clear[2], theme.clear[3])
+  gl.clear(gl.COLOR_BUFFER_BIT)
+}
+
+const renderFrame = (now) => {
+  const delta = now - lastFrameAt
+  const minInterval = state.nodeCount > 20000 ? 22 : 16
+  if (delta < minInterval && running) {
+    scheduleNextFrame()
+    return
+  }
+  lastFrameAt = now
+
+  if (!gl) {
+    scheduleNextFrame()
+    return
+  }
+
+  cullVisibleNodes()
+  clear()
+  drawEdges()
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.selected[index] === 0 && state.highlighted[index] === 0,
+    theme.node,
+    1
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.kinds[index] === 'cluster' && state.selected[index] === 0,
+    theme.nodeCluster,
+    1.15
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.highlighted[index] === 1,
+    theme.nodeHighlight,
+    1.22
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.selected[index] === 1,
+    theme.nodeSelected,
+    1.32
+  )
+
+  if (dirty) {
+    postMessage({
+      type: 'frame-stats',
+      visibleNodes: (() => {
+        let count = 0
+        for (let index = 0; index < state.nodeCount; index += 1) {
+          if (state.visible[index] === 1) count += 1
+        }
+        return count
+      })(),
+      visibleEdges: state.edgeCount
+    })
+    dirty = false
+  }
+
+  scheduleNextFrame()
+}
+
+const scheduleNextFrame = () => {
+  const raf = self.requestAnimationFrame
+  if (typeof raf === 'function') {
+    raf.call(self, renderFrame)
+    return
+  }
+  setTimeout(() => renderFrame(performance.now()), 16)
+}
+
+const setCamera = (nextCamera) => {
+  if (!nextCamera || typeof nextCamera !== 'object') {
+    return
+  }
+  camera.x = Number.isFinite(nextCamera.x) ? Number(nextCamera.x) : camera.x
+  camera.y = Number.isFinite(nextCamera.y) ? Number(nextCamera.y) : camera.y
+  camera.scale = Number.isFinite(nextCamera.scale) ? Math.max(0.0002, Math.min(8, Number(nextCamera.scale))) : camera.scale
+  dirty = true
+}
+
+const worldAtScreen = (screenX, screenY) => {
+  const x = (screenX - camera.x) / camera.scale
+  const y = (screenY - camera.y) / camera.scale
+  return [x, y]
+}
+
+const pickNode = (screenX, screenY) => {
+  const [worldX, worldY] = worldAtScreen(screenX, screenY)
+  let bestIndex = -1
+  let bestDistance = Infinity
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    if (state.visible[index] === 0) continue
+    const dx = state.x[index] - worldX
+    const dy = state.y[index] - worldY
+    const distance = Math.hypot(dx, dy)
+    const maxDistance = state.radius[index] * 1.2
+    if (distance <= maxDistance && distance < bestDistance) {
+      bestDistance = distance
+      bestIndex = index
+    }
+  }
+
+  if (bestIndex < 0) {
+    return null
+  }
+
+  return {
+    id: state.ids[bestIndex],
+    title: state.titles[bestIndex],
+    kind: state.kinds[bestIndex],
+    x: state.x[bestIndex],
+    y: state.y[bestIndex]
+  }
+}
+
+const setHighlights = (ids) => {
+  highlightedIds.clear()
+  const list = Array.isArray(ids) ? ids : []
+  for (let index = 0; index < list.length; index += 1) {
+    const id = list[index]
+    if (typeof id === 'string' && id.length > 0) {
+      highlightedIds.add(id)
+    }
+  }
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    state.highlighted[index] = highlightedIds.has(state.ids[index]) ? 1 : 0
+  }
+  dirty = true
+}
+
+const setSelected = (id) => {
+  selectedNodeId = typeof id === 'string' && id.length > 0 ? id : null
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    state.selected[index] = selectedNodeId === state.ids[index] ? 1 : 0
+  }
+  dirty = true
+}
+
+self.onmessage = (event) => {
+  const payload = event.data
+  if (!payload || typeof payload !== 'object') {
+    return
+  }
+
+  if (payload.type === 'init') {
+    canvas = payload.canvas
+    if (payload.theme && typeof payload.theme === 'object') {
+      Object.assign(theme, payload.theme)
+    }
+    const initialized = initWebGl()
+    if (!initialized) {
+      postMessage({ type: 'fatal', message: 'WebGL is not available in render worker.' })
+      return
+    }
+    resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+    setCamera(payload.camera)
+    running = true
+    scheduleNextFrame()
+    postMessage({ type: 'ready' })
+    return
+  }
+
+  if (payload.type === 'resize') {
+    resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+    return
+  }
+
+  if (payload.type === 'camera') {
+    setCamera(payload.camera)
+    return
+  }
+
+  if (payload.type === 'chunk') {
+    loadChunk(payload.chunk)
+    return
+  }
+
+  if (payload.type === 'highlight') {
+    setHighlights(payload.ids)
+    return
+  }
+
+  if (payload.type === 'select') {
+    setSelected(payload.id)
+    return
+  }
+
+  if (payload.type === 'pick') {
+    const node = pickNode(
+      Number.isFinite(payload.x) ? Number(payload.x) : 0,
+      Number.isFinite(payload.y) ? Number(payload.y) : 0
+    )
+    postMessage({
+      type: 'pick-result',
+      requestId: payload.requestId,
+      node
+    })
+    return
+  }
+
+  if (payload.type === 'pointer') {
+    hoverX = Number.isFinite(payload.x) ? Number(payload.x) : null
+    hoverY = Number.isFinite(payload.y) ? Number(payload.y) : null
+    return
+  }
+}
+`;