@amulet-laboratories/astrolabe 0.4.0

package/src/core/client/overview.js

@@ -0,0 +1,255 @@
+/**
+ * The overview is what the panel shows when nothing is selected — the repo
+ * summary you'd want before touching a line of it: what it's built on, how big
+ * it is, what's notable, and what's wrong. Previously this space said "select a
+ * node", which is a prompt, not information.
+ */
+
+function renderOverview(body) {
+  body.className = 'overview'
+  body.replaceChildren()
+
+  const h = document.createElement('h2')
+  h.textContent = G.project.name
+  body.append(h)
+  if (G.project.description) {
+    const d = document.createElement('div')
+    d.className = 'kind'
+    d.textContent = G.project.description
+    body.append(d)
+  }
+
+  body.append(statBand())
+
+  if (G.findings.length) body.append(section('Findings', [findingsList()]))
+  body.append(section('Composition', [compositionBar(), compositionList()]))
+
+  const hot = mostReferenced(6)
+  if (hot.length) body.append(section('Most referenced', [refTable(hot, (n) => `${n.count} refs`)]))
+
+  const heavy = heaviestFiles(6)
+  if (heavy.length)
+    body.append(section('Largest files', [refTable(heavy, (n) => `${n.count} lines`)]))
+
+  body.append(section('Stack', [stackList()]))
+  body.append(section('How to read this', [legend()]))
+}
+
+function statBand() {
+  const stats = [
+    [count('route'), 'routes'],
+    [count('component'), 'components'],
+    [G.stats.loc.toLocaleString(), 'lines'],
+    [
+      G.stats.contentFiles || count('collection'),
+      G.stats.contentFiles ? 'content files' : 'collections',
+    ],
+  ]
+  const d = document.createElement('div')
+  d.className = 'stat-band'
+  for (const [value, label] of stats) {
+    const cell = document.createElement('div')
+    const v = document.createElement('strong')
+    v.textContent = value
+    const l = document.createElement('span')
+    l.textContent = label
+    cell.append(v, l)
+    d.append(cell)
+  }
+  return d
+}
+
+const count = (type) => G.nodes.filter((n) => n.type === type).length
+
+/** One bar showing the shape of the codebase at a glance. */
+function compositionBar() {
+  const bar = document.createElement('div')
+  bar.className = 'bar'
+  const total = G.nodes.length
+  for (const [type, n] of typeCounts()) {
+    const seg = document.createElement('span')
+    seg.style.width = `${(n / total) * 100}%`
+    seg.style.background = `var(--${TYPES[type].color})`
+    seg.title = `${n} ${TYPES[type].label}`
+    bar.append(seg)
+  }
+  return bar
+}
+
+function compositionList() {
+  const ul = document.createElement('ul')
+  ul.className = 'legend-list'
+  for (const [type, n] of typeCounts()) {
+    const li = document.createElement('li')
+    const dot = document.createElement('span')
+    dot.className = 'dot'
+    dot.style.background = `var(--${TYPES[type].color})`
+    const name = document.createElement('span')
+    name.textContent = TYPES[type].label
+    const num = document.createElement('span')
+    num.className = 'rel'
+    num.textContent = n
+    li.append(dot, name, num)
+    ul.append(li)
+  }
+  return ul
+}
+
+function typeCounts() {
+  const counts = new Map()
+  for (const n of G.nodes) counts.set(n.type, (counts.get(n.type) ?? 0) + 1)
+  return [...counts].sort((a, b) => b[1] - a[1])
+}
+
+function findingsList() {
+  const ul = document.createElement('ul')
+  ul.className = 'findings'
+  for (const f of G.findings) {
+    const li = document.createElement('li')
+    const head = document.createElement('div')
+    head.className = 'finding-head'
+    const dot = document.createElement('span')
+    dot.className = `sev sev-${f.severity}`
+    const title = document.createElement('span')
+    title.textContent = f.title
+    head.append(dot, title)
+
+    const detail = document.createElement('div')
+    detail.className = 'finding-detail'
+    detail.textContent = f.detail
+
+    li.append(head, detail)
+
+    // The names are the point — a count you can't act on is just a number.
+    const names = document.createElement('div')
+    names.className = 'tags'
+    for (const id of f.nodes.slice(0, 12)) {
+      const node = RAW_BY_ID.get(id)
+      if (!node) continue
+      const b = document.createElement('button')
+      b.className = 'tag tag-btn'
+      b.type = 'button'
+      b.textContent = node.label
+      b.addEventListener('click', () => selectNode(id))
+      names.append(b)
+    }
+    if (f.nodes.length > 12) {
+      const more = document.createElement('span')
+      more.className = 'tag'
+      more.textContent = `+${f.nodes.length - 12} more`
+      names.append(more)
+    }
+    li.append(names)
+    ul.append(li)
+  }
+  return ul
+}
+
+function mostReferenced(limit) {
+  const counts = new Map()
+  for (const e of G.edges) counts.set(e.to, (counts.get(e.to) ?? 0) + 1)
+  return [...counts]
+    .map(([id, n]) => ({ node: RAW_BY_ID.get(id), count: n }))
+    .filter((r) => r.node)
+    .sort((a, b) => b.count - a.count)
+    .slice(0, limit)
+}
+
+function heaviestFiles(limit) {
+  return G.nodes
+    .filter((n) => n.meta.loc)
+    .map((n) => ({ node: n, count: n.meta.loc }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, limit)
+}
+
+function refTable(rows, format) {
+  const ul = document.createElement('ul')
+  ul.className = 'rank'
+  for (const row of rows) {
+    const li = document.createElement('li')
+    const b = document.createElement('button')
+    b.className = 'ref'
+    b.type = 'button'
+    b.textContent = row.node.label
+    b.style.color = colorOf(row.node)
+    b.addEventListener('click', () => selectNode(row.node.id))
+    const n = document.createElement('span')
+    n.className = 'rel'
+    n.textContent = format(row)
+    li.append(b, n)
+    ul.append(li)
+  }
+  return ul
+}
+
+function stackList() {
+  const frag = document.createDocumentFragment()
+  const facts = []
+  if (G.project.stack?.nuxt) facts.push(['Nuxt', G.project.stack.nuxt])
+  if (G.project.stack?.node) facts.push(['Node', G.project.stack.node])
+  if (G.project.stack?.packageManager)
+    facts.push(['Package manager', G.project.stack.packageManager])
+  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)
+    }
+    frag.append(ul)
+  }
+  if (G.project.modules?.length) {
+    const h = document.createElement('h3')
+    h.textContent = 'Nuxt modules'
+    frag.append(h, tagList(G.project.modules))
+  }
+  const deps = G.project.stack?.dependencies ?? []
+  if (deps.length) {
+    const h = document.createElement('h3')
+    h.textContent = `Dependencies (${deps.filter((d) => !d.dev).length} runtime, ${deps.filter((d) => d.dev).length} dev)`
+    const d = document.createElement('div')
+    d.className = 'tags'
+    for (const dep of deps) {
+      const s = document.createElement('span')
+      s.className = `tag${dep.dev ? ' tag-dim' : ''}`
+      s.textContent = dep.name
+      s.title = `${dep.name}@${dep.version}${dep.dev ? ' (dev)' : ''}`
+      d.append(s)
+    }
+    frag.append(h, d)
+  }
+  return frag
+}
+
+function legend() {
+  const ul = document.createElement('ul')
+  ul.className = 'legend-list'
+  for (const [kind, verb] of Object.entries(EDGE_VERB)) {
+    if (kind === 'depends') continue
+    const li = document.createElement('li')
+    const line = document.createElement('span')
+    line.className = 'edge-swatch'
+    const name = document.createElement('span')
+    name.textContent = verb
+    const hint = document.createElement('span')
+    hint.className = 'rel'
+    hint.textContent = EDGE_HINT[kind] ?? ''
+    li.append(line, name, hint)
+    ul.append(li)
+  }
+  return ul
+}
+
+const EDGE_HINT = {
+  renders: 'template or markdown',
+  uses: 'composable call',
+  queries: 'queryCollection()',
+  fetches: '$fetch / useFetch',
+  reads: 'app or runtime config',
+  wraps: 'layout',
+  guards: 'middleware',
+}