Sensor Telemetry

const h = React.createElement

const ROWS = 20000
const CHANNELS = 80

const RIGS = ['Thermal Loop A','Thermal Loop B','Vibration Rig','Vacuum Chamber',
              'Cryo Stage','Pressure Cell','Spin Table','Acoustic Bay']
const STATES = ['Nominal','Nominal','Nominal','Nominal','Watch','Fault']

let seed = 31337
const rnd = () => (seed = (seed * 1103515245 + 12345) & 0x7fffffff) / 0x7fffffff

// Channel metadata, built once. Each channel gets its own unit and its own
// plausible range, so the heatmap is per-channel rather than one global
// scale across quantities that share no dimension.
const UNITS = ['°C','kPa','mm/s','mA','V','rpm','ppm','µm']
const channels = []
for (let c = 0; c < CHANNELS; c++) {
  const unit = UNITS[c % UNITS.length]
  const base = 10 + (c * 37) % 400
  channels.push({
    key: 'ch' + c,
    label: 'CH' + String(c + 1).padStart(2, '0'),
    unit,
    min: base,
    max: base + 40 + (c % 7) * 25,
  })
}

// 20,000 x 80 = 1.6M readings. Built in one typed pass; the per-row object
// is created once with all its channel keys rather than grown field by
// field, which keeps it on a single hidden class.
const readings = new Array(ROWS)
for (let i = 0; i < ROWS; i++) {
  const row = {
    id: 'R' + String(i).padStart(6, '0'),
    ts: new Date(Date.UTC(2026, 8, 1, 0, 0, 0) + i * 30000)
          .toISOString().replace('T', ' ').slice(0, 19),
    rig: RIGS[i % RIGS.length],
    state: STATES[(i * 13) % STATES.length],
    run: 'RUN-' + String(1 + Math.floor(i / 500)).padStart(3, '0'),
  }
  for (let c = 0; c < CHANNELS; c++) {
    const ch = channels[c]
    row[ch.key] = Math.round((ch.min + rnd() * (ch.max - ch.min)) * 10) / 10
  }
  readings[i] = row
}

const stateCell = (v) =>
  h('span', { className: 'state state-' + String(v).toLowerCase() },
    String(v).toUpperCase())

// ── Columns ───────────────────────────────────────────────────
// Four identity columns, then 80 channels. The identity ones are pinned
// left, so a reader 60 columns deep still knows which run they are in.
const columns = [
  { field: 'ts', header: 'Timestamp',
    size: { width: 168 },
    display: { pinned: 'left', cellClass: 'ts' },
    filter: { type: 'text' } },

  { field: 'id', header: 'Reading',
    size: { width: 104 },
    display: { pinned: 'left', cellClass: 'unit-id' } },

  { field: 'rig', header: 'Rig',
    size: { width: 140 },
    filter: { type: 'set' } },

  { field: 'run', header: 'Run',
    size: { width: 104 },
    filter: { type: 'set' } },

  { field: 'state', header: 'State',
    size: { width: 104 },
    display: { cellRenderer: stateCell },
    filter: { type: 'set' } },
]

for (const ch of channels) {
  const span = ch.max - ch.min || 1
  columns.push({
    field: ch.key,
    header: ch.label + ' (' + ch.unit + ')',
    size: { width: 112 },
    display: {
      formatter: (v) => Number(v).toFixed(1),
      // Bucketed against THIS channel's own range — a global scale would
      // paint every millivolt column blue and every rpm column red.
      cellClass: (v) => {
        const t = (Number(v) - ch.min) / span
        const b = Math.max(0, Math.min(7, Math.floor(t * 8)))
        return 'hm-' + b
      },
      tooltip: (v) => ch.label + ': ' + Number(v).toFixed(1) + ' ' + ch.unit,
    },
    filter: { type: 'number' },
  })
}

let api = null

const grid = createGrid({
  modules: [AllModules],
  columns,
  data: readings,
  rowId: 'id',
  sorting: { enabled: true, multiSort: true },
  filtering: { enabled: true, searchBar: true, searchPlaceholder: 'Search readings…' },
  appearance: { rowHeight: 34, headerHeight: 38, rowStriping: false },
  export: { filename: 'elitegrid-telemetry', scope: 'filtered' },
  events: {
    onReady: (a) => { api = a; ready({ rowCount: ROWS, columnCount: columns.length }) },
  },
})

createRoot(mountEl).render(
  h('div', { className: 'shell' },
    h('div', { className: 'hint' },
      h('b', null, columns.length + ' columns × ' + ROWS.toLocaleString('en-US') + ' readings'),
      ' — scroll sideways. Only the columns on screen exist in the DOM. ',
      'Use a column\'s ⋮ menu to pin or hide one.'),
    h('div', { className: 'grid-wrap' }, h(Grid, { grid })),
  ),
)

onMessage('EXPORT_CSV', () =>
  api && api.exportCSV({ filename: 'elitegrid-telemetry', scope: 'filtered' }))