@amulet-laboratories/astrolabe 0.4.0

package/src/core/client/app.js

@@ -0,0 +1,662 @@
+const G = JSON.parse(document.getElementById('data').textContent)
+const NS = 'http://www.w3.org/2000/svg'
+const RAW_BY_ID = new Map(G.nodes.map((n) => [n.id, n]))
+
+const state = {
+  view: 'layers',
+  group: true,
+  types: new Set(Object.keys(TYPES)),
+  focus: null,
+  heat: false,
+}
+
+let current = { proj: null, layout: null, byId: new Map() }
+let selected = null
+let hovered = null
+let hits = new Set()
+
+const svg = document.getElementById('svg')
+const viewport = document.getElementById('viewport')
+const gLinks = document.getElementById('links')
+const gNodes = document.getElementById('nodes')
+const gCols = document.getElementById('cols')
+
+const colorOf = (n) => `var(--${TYPES[n.type].color})`
+const truncate = (s, max) => (s.length > max ? `${s.slice(0, max - 1)}…` : s)
+const shortPkg = (p) => p.replace(/^@[^/]+\//, '')
+
+function el(name, attrs = {}) {
+  const node = document.createElementNS(NS, name)
+  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v)
+  return node
+}
+
+// --- drawing ----------------------------------------------------------------
+
+function draw({ refit = false } = {}) {
+  const view = VIEWS[state.view]
+  const proj = applyFocus(view.project(G, state), state.focus)
+  const grouping = state.group && view.grouping !== false
+  const layout = computeLayout(proj, { ...state, group: grouping })
+  current = { proj, layout, byId: new Map(proj.nodes.map((n) => [n.id, n])) }
+
+  const toggle = document.getElementById('group')
+  toggle.disabled = view.grouping === false
+  document.getElementById('group-label').classList.toggle('disabled', toggle.disabled)
+
+  gLinks.replaceChildren()
+  gNodes.replaceChildren()
+  gCols.replaceChildren()
+
+  for (const c of layout.active) {
+    const title = el('text', { x: layout.xs.get(c), y: 16, class: 'col-title' })
+    const name = proj.title(c) ?? `Column ${c}`
+    title.textContent = `${name} (${layout.cols.get(c).length})`
+    gCols.append(
+      title,
+      el('line', {
+        x1: layout.xs.get(c),
+        y1: 26,
+        x2: layout.xs.get(c) + NODE_W,
+        y2: 26,
+        class: 'col-rule',
+      }),
+    )
+  }
+  for (const h of layout.headers) {
+    const t = el('text', { x: h.x + 2, y: h.y, class: 'group-title' })
+    t.textContent = h.text
+    gCols.append(t)
+  }
+
+  for (const e of proj.edges) {
+    const path = el('path', {
+      d: edgePath(e, layout),
+      class: 'link',
+      'data-from': e.from,
+      'data-to': e.to,
+    })
+    path.style.setProperty('--lc', colorOf(current.byId.get(e.to)))
+    if (e.weight > 1)
+      path.setAttribute('stroke-width', Math.min(6, 1 + Math.log2(e.weight)).toFixed(2))
+    gLinks.append(path)
+  }
+
+  // Heat overlay: warmth ∝ how often a file changes. sqrt spreads the long
+  // tail so a handful of very-hot files don't flatten everything else.
+  const maxChurn = state.heat ? Math.max(1, ...proj.nodes.map((n) => n.meta.churn ?? 0)) : 1
+
+  for (const n of proj.nodes) {
+    const { x, y } = layout.pos.get(n.id)
+    const g = el('g', { class: 'node', transform: `translate(${x},${y})`, 'data-id': n.id })
+    g.style.setProperty('--nc', colorOf(n))
+    if (state.heat)
+      g.style.setProperty('--heat', Math.sqrt((n.meta.churn ?? 0) / maxChurn).toFixed(3))
+    g.append(el('rect', { width: NODE_W, height: NODE_H }))
+    g.append(el('rect', { width: 3, height: NODE_H, class: 'tick', rx: 1.5 }))
+
+    const label = el('text', { x: 10, y: NODE_H / 2 })
+    label.textContent = truncate(n.label, 24)
+    g.append(label)
+
+    const badge = badgeFor(n)
+    if (badge) {
+      const b = el('text', { x: NODE_W - 8, y: NODE_H / 2, class: 'badge' })
+      b.textContent = badge
+      g.append(b)
+    }
+    const title = el('title')
+    title.textContent = n.label + (n.file ? ` — ${n.file}` : '')
+    g.append(title)
+    gNodes.append(g)
+  }
+
+  svg.dataset.w = layout.width
+  svg.dataset.h = layout.height
+  document.getElementById('hint').textContent = VIEWS[state.view].hint
+  paint()
+  if (refit) fit()
+}
+
+function badgeFor(n) {
+  if (n.meta.module) return `${n.meta.members}`
+  if (n.type === 'server' && n.meta.method && n.meta.method !== 'ALL') return n.meta.method
+  if (n.type === 'collection' && n.meta.files) return `${n.meta.files} files`
+  if (n.meta.pkg) return shortPkg(n.meta.pkg)
+  return ''
+}
+
+function neighboursOf(id) {
+  const near = new Set([id])
+  for (const e of current.proj.edges) {
+    if (e.from === id) near.add(e.to)
+    if (e.to === id) near.add(e.from)
+  }
+  return near
+}
+
+function paint() {
+  // Hover previews the same highlight a click would give, but only when
+  // nothing is pinned — otherwise moving the mouse would fight the selection.
+  const active = selected ?? (current.byId.has(hovered) ? hovered : null)
+  const near = active ? neighboursOf(active) : null
+  for (const g of gNodes.children) {
+    const id = g.dataset.id
+    g.classList.toggle('dim', !!near && !near.has(id))
+    g.classList.toggle('sel', id === selected)
+    g.classList.toggle('hover', id === active && id !== selected)
+    g.classList.toggle('hit', hits.has(id))
+  }
+  for (const p of gLinks.children) {
+    const on = !!near && (p.dataset.from === active || p.dataset.to === active)
+    p.classList.toggle('on', on)
+    p.classList.toggle('dim', !!near && !on)
+  }
+}
+
+/** Toggling select, for clicks on the canvas. */
+function select(id) {
+  selected = selected === id ? null : id
+  paint()
+  renderPanel()
+  syncHash()
+}
+
+/**
+ * Jump to a node by id — from a finding, a ranking, or a relationship link.
+ * Every path that selects something goes through here, so none of them can
+ * forget to sync the URL or move the camera.
+ */
+function selectNode(id) {
+  selected = id
+  paint()
+  renderPanel()
+  syncHash()
+  if (current.layout.pos.has(id)) focusNode(id)
+}
+
+// --- detail panel -----------------------------------------------------------
+
+function renderPanel() {
+  const body = document.getElementById('panel-body')
+  const node = selected && (current.byId.get(selected) ?? RAW_BY_ID.get(selected))
+  if (!node) return renderOverview(body)
+  body.className = ''
+  body.replaceChildren()
+
+  const h = document.createElement('h2')
+  h.textContent = node.label
+  const kind = document.createElement('div')
+  kind.className = 'kind'
+  kind.textContent = node.meta.module
+    ? 'Module'
+    : TYPES[node.type].label + (node.meta.pkg ? ` · ${node.meta.pkg}` : '')
+  body.append(h, kind)
+
+  if (node.file) {
+    const f = document.createElement('div')
+    f.className = 'file'
+    f.textContent = node.file
+    body.append(f)
+  }
+
+  const isolate = document.createElement('button')
+  isolate.className = 'action'
+  isolate.type = 'button'
+  isolate.textContent = state.focus === node.id ? 'Show everything' : 'Isolate this'
+  isolate.addEventListener('click', () => setFocus(state.focus === node.id ? null : node.id))
+  body.append(isolate)
+
+  if (node.meta.module) {
+    body.append(section('Contains', [tagList(node.meta.kinds)]))
+    body.append(section(`Members (${node.meta.members})`, [tagList(node.meta.names)]))
+  }
+
+  const facts = []
+  if (node.meta.loc) facts.push(['Lines', String(node.meta.loc)])
+  if (node.meta.churn) facts.push(['Churn', `${node.meta.churn} commits`])
+  if (node.meta.layout) facts.push(['Layout', node.meta.layout])
+  if (node.meta.method) facts.push(['Method', node.meta.method])
+  if (node.meta.type) facts.push(['Type', node.meta.type])
+  if (node.meta.source) facts.push(['Source', node.meta.source])
+  if (node.meta.files) facts.push(['Files', String(node.meta.files)])
+  if (node.meta.group && !node.meta.module) facts.push(['Group', node.meta.group])
+  if (facts.length) {
+    const ul = document.createElement('ul')
+    for (const [k, v] of facts) {
+      const li = document.createElement('li')
+      const label = document.createElement('span')
+      label.className = 'rel'
+      label.textContent = `${k} `
+      li.append(label, document.createTextNode(v))
+      ul.append(li)
+    }
+    body.append(section('Details', [ul]))
+  }
+  if (node.meta.props?.length) body.append(section('Props', [tagList(node.meta.props)]))
+  if (node.meta.fields?.length) body.append(section('Schema', [tagList(node.meta.fields)]))
+
+  // Relationships come from the raw graph, not the current projection, so the
+  // panel always tells the whole truth even when a view hides some edges.
+  const edges = node.meta.module ? current.proj.edges : G.edges
+  const lookup = node.meta.module ? current.byId : RAW_BY_ID
+  const outs = edges.filter((e) => e.from === node.id)
+  const ins = edges.filter((e) => e.to === node.id)
+  if (outs.length)
+    body.append(section(`Depends on (${outs.length})`, [refList(outs, 'to', lookup)]))
+  if (ins.length) body.append(section(`Used by (${ins.length})`, [refList(ins, 'from', lookup)]))
+
+  // Whatever the findings pass concluded about this node, said here too — so
+  // the node view and the overview can never disagree.
+  for (const f of G.findings.filter((f) => f.nodes.includes(node.id))) {
+    const w = document.createElement('div')
+    w.className = `warn sev-${f.severity}`
+    w.textContent = f.detail
+    body.append(w)
+  }
+}
+
+function section(title, children) {
+  const frag = document.createDocumentFragment()
+  const h = document.createElement('h3')
+  h.textContent = title
+  frag.append(h, ...children)
+  return frag
+}
+
+function tagList(items) {
+  const d = document.createElement('div')
+  d.className = 'tags'
+  for (const it of items) {
+    const s = document.createElement('span')
+    s.className = 'tag'
+    s.textContent = it
+    d.append(s)
+  }
+  return d
+}
+
+function refList(edges, side, lookup) {
+  const ul = document.createElement('ul')
+  for (const e of edges) {
+    const other = lookup.get(e[side]) ?? RAW_BY_ID.get(e[side])
+    if (!other) continue
+    const li = document.createElement('li')
+    const rel = document.createElement('span')
+    rel.className = 'rel'
+    rel.textContent = (EDGE_VERB[e.kind] ?? e.kind) + (e.weight > 1 ? ` ×${e.weight} ` : ' ')
+    const b = document.createElement('button')
+    b.className = 'ref'
+    b.type = 'button'
+    b.textContent = other.label
+    b.style.color = colorOf(other)
+    b.addEventListener('click', () => selectNode(other.id))
+    li.append(rel, b)
+    ul.append(li)
+  }
+  return ul
+}
+
+// --- controls ---------------------------------------------------------------
+
+function setFocus(id) {
+  state.focus = id
+  const note = document.getElementById('focus-note')
+  note.hidden = !id
+  if (id) note.querySelector('span').textContent = (RAW_BY_ID.get(id) ?? { label: id }).label
+  draw({ refit: true })
+  renderPanel()
+  syncHash()
+}
+
+function setView(id) {
+  state.view = id
+  for (const b of document.querySelectorAll('#views button')) {
+    b.setAttribute('aria-selected', String(b.dataset.view === id))
+  }
+  draw({ refit: true })
+  renderPanel()
+  syncHash()
+}
+
+function buildViews() {
+  const host = document.getElementById('views')
+  for (const [id, view] of Object.entries(VIEWS)) {
+    const b = document.createElement('button')
+    b.type = 'button'
+    b.role = 'tab'
+    b.dataset.view = id
+    b.textContent = view.name
+    b.setAttribute('aria-selected', String(id === state.view))
+    b.addEventListener('click', () => setView(id))
+    host.append(b)
+  }
+}
+
+function buildChips() {
+  const chips = document.getElementById('chips')
+  const counts = new Map()
+  for (const n of G.nodes) counts.set(n.type, (counts.get(n.type) ?? 0) + 1)
+  for (const type of Object.keys(TYPES)) {
+    if (!counts.get(type)) continue
+    const b = document.createElement('button')
+    b.className = 'chip'
+    b.type = 'button'
+    b.setAttribute('aria-pressed', 'true')
+    b.style.setProperty('--dot', `var(--${TYPES[type].color})`)
+    b.innerHTML = '<span class="dot"></span>'
+    const n = document.createElement('span')
+    n.className = 'n'
+    n.textContent = counts.get(type)
+    b.append(document.createTextNode(TYPES[type].label), n)
+    b.addEventListener('click', () => {
+      state.types.has(type) ? state.types.delete(type) : state.types.add(type)
+      b.setAttribute('aria-pressed', String(state.types.has(type)))
+      draw()
+    })
+    chips.append(b)
+  }
+}
+
+document.getElementById('group').addEventListener('change', (ev) => {
+  state.group = ev.target.checked
+  draw()
+})
+
+document.getElementById('search').addEventListener('input', (ev) => {
+  const q = ev.target.value.trim().toLowerCase()
+  hits = new Set(
+    q
+      ? G.nodes
+          .filter((n) => `${n.label} ${n.file ?? ''}`.toLowerCase().includes(q))
+          .map((n) => n.id)
+      : [],
+  )
+  paint()
+  const first = [...hits].find((id) => current.layout.pos.has(id))
+  if (q && first) focusNode(first)
+})
+
+document.getElementById('reset').addEventListener('click', () => {
+  selected = null
+  setFocus(null)
+  renderPanel()
+  paint()
+  fit()
+})
+
+const VIEW_KEYS = Object.keys(VIEWS)
+
+document.addEventListener('keydown', (ev) => {
+  const typing = /^(INPUT|TEXTAREA)$/.test(ev.target.tagName)
+  if (ev.key === 'Escape') {
+    if (typing) return ev.target.blur()
+    if (state.focus) setFocus(null)
+    else select(null)
+    return
+  }
+  if (typing || ev.metaKey || ev.ctrlKey || ev.altKey) return
+
+  if (ev.key === '/') {
+    ev.preventDefault()
+    document.getElementById('search').focus()
+  } else if (ev.key >= '1' && ev.key <= String(VIEW_KEYS.length)) {
+    setView(VIEW_KEYS[Number(ev.key) - 1])
+  } else if (ev.key === 'g') {
+    const box = document.getElementById('group')
+    if (box.disabled) return
+    box.checked = !box.checked
+    state.group = box.checked
+    draw()
+  } else if (ev.key === 'f' && selected) {
+    setFocus(state.focus === selected ? null : selected)
+  }
+})
+
+// --- shareable state --------------------------------------------------------
+// The view, selection and isolation live in the URL, so a particular reading of
+// the graph can be sent to someone else as a link.
+
+function syncHash() {
+  const parts = [`v=${state.view}`]
+  if (selected) parts.push(`n=${encodeURIComponent(selected)}`)
+  if (state.focus) parts.push(`f=${encodeURIComponent(state.focus)}`)
+  history.replaceState(null, '', `#${parts.join('&')}`)
+}
+
+function readHash() {
+  const params = new URLSearchParams(location.hash.slice(1))
+  const view = params.get('v')
+  if (view && VIEWS[view]) state.view = view
+  const focus = params.get('f')
+  if (focus && RAW_BY_ID.has(focus)) state.focus = focus
+  const node = params.get('n')
+  if (node && RAW_BY_ID.has(node)) selected = node
+}
+
+// --- pan / zoom -------------------------------------------------------------
+
+const view = { x: 0, y: 0, k: 1 }
+const apply = () =>
+  viewport.setAttribute('transform', `translate(${view.x},${view.y}) scale(${view.k})`)
+
+svg.addEventListener(
+  'wheel',
+  (ev) => {
+    ev.preventDefault()
+    const r = svg.getBoundingClientRect()
+    const px = ev.clientX - r.left
+    const py = ev.clientY - r.top
+    const k = Math.min(2.5, Math.max(0.08, view.k * Math.exp(-ev.deltaY * 0.0015)))
+    view.x = px - (px - view.x) * (k / view.k)
+    view.y = py - (py - view.y) * (k / view.k)
+    view.k = k
+    apply()
+  },
+  { passive: false },
+)
+
+// A press is a click until it travels far enough to be a pan. Pointer capture
+// is taken only once panning starts: capturing on pointerdown would retarget
+// the click to the <svg> and swallow every node selection.
+const DRAG_SLOP = 4
+let drag = null
+
+svg.addEventListener('pointerdown', (ev) => {
+  if (ev.button !== 0) return
+  drag = { sx: ev.clientX, sy: ev.clientY, x0: view.x, y0: view.y, moved: false, id: ev.pointerId }
+})
+
+svg.addEventListener('pointermove', (ev) => {
+  if (!drag) return
+  const dx = ev.clientX - drag.sx
+  const dy = ev.clientY - drag.sy
+  if (!drag.moved) {
+    if (Math.hypot(dx, dy) < DRAG_SLOP) return
+    drag.moved = true
+    svg.classList.add('grabbing')
+    svg.setPointerCapture(drag.id)
+  }
+  view.x = drag.x0 + dx
+  view.y = drag.y0 + dy
+  apply()
+})
+
+svg.addEventListener('pointerup', (ev) => {
+  if (!drag) return
+  const wasDrag = drag.moved
+  if (wasDrag && svg.hasPointerCapture(drag.id)) svg.releasePointerCapture(drag.id)
+  drag = null
+  svg.classList.remove('grabbing')
+  if (wasDrag) return
+  const hit = ev.target.closest?.('.node')
+  select(hit ? hit.dataset.id : null)
+})
+
+svg.addEventListener('pointercancel', () => {
+  drag = null
+  svg.classList.remove('grabbing')
+})
+
+svg.addEventListener('pointerover', (ev) => {
+  if (selected || drag?.moved) return
+  const id = ev.target.closest?.('.node')?.dataset.id ?? null
+  if (id === hovered) return
+  hovered = id
+  paint()
+})
+
+svg.addEventListener('pointerleave', () => {
+  if (!hovered) return
+  hovered = null
+  paint()
+})
+
+function fit() {
+  const r = svg.getBoundingClientRect()
+  const w = Number(svg.dataset.w) || 1
+  const h = Number(svg.dataset.h) || 1
+  view.k = Math.min((r.width - 40) / w, (r.height - 40) / h, 1)
+  view.x = (r.width - w * view.k) / 2
+  view.y = 20
+  apply()
+}
+
+function focusNode(id) {
+  const p = current.layout.pos.get(id)
+  if (!p) return
+  const r = svg.getBoundingClientRect()
+  view.x = r.width / 2 - (p.x + NODE_W / 2) * view.k
+  view.y = r.height / 2 - (p.y + NODE_H / 2) * view.k
+  apply()
+}
+
+document.getElementById('focus-clear').addEventListener('click', () => setFocus(null))
+window.addEventListener('resize', () => fit())
+
+// --- heat toggle ------------------------------------------------------------
+// Only offered when the app is a git repo (churn data is present). Shades every
+// file-backed node by how often it changes — where the risk and the reading is.
+if (G.nodes.some((n) => n.meta.churn)) {
+  const heatBtn = document.createElement('button')
+  heatBtn.id = 'heat'
+  heatBtn.type = 'button'
+  heatBtn.textContent = 'Heat'
+  heatBtn.title = 'Shade nodes by how often they change (git churn)'
+  heatBtn.setAttribute('aria-pressed', 'false')
+  document.getElementById('reset').before(heatBtn)
+  heatBtn.addEventListener('click', () => {
+    state.heat = !state.heat
+    heatBtn.setAttribute('aria-pressed', String(state.heat))
+    document.getElementById('canvas').classList.toggle('heat', state.heat)
+    draw()
+  })
+}
+
+// --- command palette --------------------------------------------------------
+// ⌘K / Ctrl-K opens a fuzzy jump-to-node search over the whole graph — the
+// fastest way to reach a node by name in a large app. Selecting one routes
+// through selectNode, so it moves the camera, panel and URL like any other pick.
+
+const palette = document.createElement('div')
+palette.id = 'palette'
+palette.hidden = true
+palette.innerHTML =
+  '<div class="palette-box"><input type="search" placeholder="Jump to any node…" autocomplete="off" spellcheck="false" aria-label="Jump to node"><ul role="listbox"></ul></div>'
+document.body.append(palette)
+const palInput = palette.querySelector('input')
+const palList = palette.querySelector('ul')
+let palItems = []
+let palIndex = 0
+
+function openPalette() {
+  palette.hidden = false
+  palInput.value = ''
+  renderPalette('')
+  palInput.focus()
+}
+
+function renderPalette(q) {
+  const query = q.trim().toLowerCase()
+  palItems = G.nodes
+    .filter(
+      (n) =>
+        !query ||
+        `${n.label} ${n.file ?? ''} ${TYPES[n.type]?.label ?? ''}`.toLowerCase().includes(query),
+    )
+    .slice(0, 40)
+  palIndex = 0
+  palList.replaceChildren()
+  palItems.forEach((n, i) => {
+    const li = document.createElement('li')
+    li.setAttribute('role', 'option')
+    if (i === 0) li.className = 'active'
+    const dot = document.createElement('span')
+    dot.className = 'pdot'
+    dot.style.background = colorOf(n)
+    const label = document.createElement('span')
+    label.className = 'plabel'
+    label.textContent = n.label
+    const kind = document.createElement('span')
+    kind.className = 'pkind'
+    kind.textContent = TYPES[n.type]?.label ?? n.type
+    li.append(dot, label, kind)
+    li.addEventListener('mousedown', (ev) => {
+      ev.preventDefault()
+      choosePalette(i)
+    })
+    palList.append(li)
+  })
+}
+
+function movePalette(delta) {
+  if (!palItems.length) return
+  palIndex = (palIndex + delta + palItems.length) % palItems.length
+  for (const [i, li] of [...palList.children].entries())
+    li.classList.toggle('active', i === palIndex)
+  palList.children[palIndex]?.scrollIntoView({ block: 'nearest' })
+}
+
+function choosePalette(i) {
+  const n = palItems[i]
+  if (!n) return
+  palette.hidden = true
+  selectNode(n.id)
+}
+
+palInput.addEventListener('input', (ev) => renderPalette(ev.target.value))
+palInput.addEventListener('keydown', (ev) => {
+  if (ev.key === 'ArrowDown') (ev.preventDefault(), movePalette(1))
+  else if (ev.key === 'ArrowUp') (ev.preventDefault(), movePalette(-1))
+  else if (ev.key === 'Enter') (ev.preventDefault(), choosePalette(palIndex))
+  else if (ev.key === 'Escape') (ev.preventDefault(), (palette.hidden = true))
+})
+palette.addEventListener('mousedown', (ev) => {
+  if (ev.target === palette) palette.hidden = true
+})
+document.addEventListener('keydown', (ev) => {
+  if ((ev.metaKey || ev.ctrlKey) && ev.key === 'k') {
+    ev.preventDefault()
+    palette.hidden ? openPalette() : (palette.hidden = true)
+  }
+})
+
+// A visible, clickable affordance so the palette is discoverable, not just a
+// shortcut you have to already know.
+const palHint = document.createElement('button')
+palHint.id = 'pal-hint'
+palHint.type = 'button'
+palHint.textContent = '⌘K'
+palHint.title = 'Jump to any node'
+palHint.addEventListener('click', openPalette)
+document.getElementById('search').before(palHint)
+
+readHash()
+buildViews()
+buildChips()
+if (state.focus) setFocus(state.focus)
+else draw()
+fit()
+renderPanel()
+if (selected) focusNode(selected)
+if (G.warnings.length) document.getElementById('warnings').textContent = G.warnings.join(' · ')