diff-seismograph

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const t = await read($, totals)
    const isOn = await read($, band)
    if (e.props.hasSurvey || !isOn || t.edits === 0 || e.props.maxRows < 2 || e.props.bodyColumns < 20) {
      if (site !== null && site.requestId === e.requestId) site = null
      return next(e)
    }
    const hud = hudOf(t)
    const flashingNow = alert !== null && alert.framesLeft > 0
    if (e.surface !== 'terminal') {
      if (site !== null && site.requestId === e.requestId) site = null
      // One row here: the mods beneath get the rest of the band.
      const below = await next({ ...e, props: { ...e.props, maxRows: e.props.maxRows - 1 } })
      const list = await read($, events)
      const { Box, Text } = $.ui.resolve(e)
      const line = sparkline(list.map(ev => ev.add + ev.del), 40)
      const quakeNote = flashingNow && alert !== null ? `  ◆ QUAKE M${alert.mag.toFixed(1)} ${baseName(alert.file)}` : ''
      return (
        <Box flexDirection="column">
          <Text>
            ≋ {line} +{hud.add} −{hud.del} · {hud.files} files{quakeNote}
          </Text>
          {below}
        </Box>
      )
    }
    const { Box, Raster } = $.ui.resolve(e)
    const columns = Math.min(512, e.props.bodyColumns)
    const rows = e.props.maxRows >= 4 ? 3 : 2
    // Reserve this band's rows before the mods beneath draw, so together they fit.
    const below = await next({ ...e, props: { ...e.props, maxRows: e.props.maxRows - rows } })
    site = { requestId: e.requestId, columns, rows }
    trace.resize(columns)
    const flashing = alert !== null && alert.framesLeft > 0
    const cells = bandCells(trace, columns, rows, hud, flashing ? alert : null, flashing).encode()
    return (
      <Box flexDirection="column">
        <Raster key={BAND_KEY} columns={columns} rows={rows} cells={cells} />
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, events)
    const files = await read($, heat)
    const repo = await read($, map)
    const latest = await read($, quake)
    const t = await read($, totals)
    const biggest = await read($, largest)
    const hottest = Object.entries(files)
      .sort((a, b) => weightOf(b[1]) - weightOf(a[1]))
      .slice(0, 6)
    const columns = Math.max(30, Math.min(512, e.props.bodyColumns))
    const viewRows = e.viewport?.rows ?? 40
    const fileCount = Object.keys(files).length
    const summary = `+${t.add} −${t.del} across ${fileCount} file${fileCount === 1 ? '' : 's'} · ${t.edits} edit${t.edits === 1 ? '' : 's'} · ${t.quakes} quake${t.quakes === 1 ? '' : 's'}`
    const largestLine = biggest === null ? '' : `largest: ${describe(biggest)}`
    const latestLine = latest === null || sameQuake(latest, biggest) ? '' : `latest quake: ${describe(latest)}`
    const fileLine = (file: string, fh: FileHeat) => `${baseName(file)} +${fh.add} −${fh.del}${fh.touched > 0 ? ' (+ unmeasured changes)' : ''}`
    if (e.surface !== 'terminal') {
      const { Box, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column">
          <Text bold>Session seismograph</Text>
          <Text>{sparkline(list.map(ev => ev.add + ev.del), Math.min(80, columns))}</Text>
          <Text>{summary}</Text>
          {largestLine.length > 0 && <Text>{largestLine}</Text>}
          {latestLine.length > 0 && <Text>{latestLine}</Text>}
          {hottest.map(([file, fh]) => (
            <Text key={file}>{fileLine(file, fh)}</Text>
          ))}
        </Box>
      )
    }
    const { Box, Text, Raster } = $.ui.resolve(e)
    const graphRows = 6
    const mapRows = Math.max(6, Math.min(40, viewRows - graphRows - 11))
    const graph = sessionCells(list, columns, graphRows).encode()
    return (
      <Box flexDirection="column">
        <Text bold color="cyan">
          ≋ SESSION SEISMOGRAPH
        </Text>
        <Raster key={PANE_GRAPH} columns={columns} rows={graphRows} cells={graph} />
        <Text>
          <Text color="green">+{t.add}</Text> <Text color="red">−{t.del}</Text>
          <Text dimColor>
            {' '}
            across {fileCount} file{fileCount === 1 ? '' : 's'} · {t.edits} edit{t.edits === 1 ? '' : 's'} · {t.quakes} quake
            {t.quakes === 1 ? '' : 's'}
          </Text>
        </Text>
        {largestLine.length > 0 && <Text color="red">◆ {largestLine}</Text>}
        {latestLine.length > 0 && <Text color="yellow">◇ {latestLine}</Text>}
        <Text bold color="cyan">
          ▦ REPO HEAT MAP
        </Text>
        {repo === null ? (
          <Text dimColor>Not a git repository, or git is unavailable: no heat map.</Text>
        ) : (
          <Raster key={PANE_MAP} columns={columns} rows={mapRows} cells={treemapCells(entriesOf(repo, files), columns, mapRows).encode()} />
        )}
        {repo !== null && repo.isCut && <Text dimColor>The file listing was cut off: the map shows part of the repo.</Text>}
        {repo !== null && repo.more > 0 && <Text dimColor>Largest {repo.files.length} files shown; {repo.more} smaller ones left out.</Text>}
        {hottest.length > 0 && <Text dimColor>hottest: {hottest.map(([file, fh]) => fileLine(file, fh)).join('  ')}</Text>}
      </Box>
    )
  })