path: root/data/vue/App.vue

<template>
  <div ref="top_pad"></div>
  <div class="top_bar" ref="top_bar">
    <h1>
      Salis data server »
      <span class="opts_name">
        {{ opts.name }}
        {{ query_in_progress ? '⧖' : '✓' }}
      </span>
    </h1>
    <form @change="on_form_change">
      <span class="nobr">Rows: <input class="input_small" :class="{ input_touched: inputs.rows !== params.rows }" v-model="inputs.rows" /></span><wbr />
      <span class="nobr">nth: <input class="input_small" :class="{ input_touched: inputs.nth !== params.nth }" v-model="inputs.nth" /></span><wbr />
      <span class="nobr">Axis: <select class="input_small" :class="{ input_touched: inputs.axis !== params.axis }" v-model="inputs.axis"><option v-for="axis in axes">{{ axis }}</option></select></span><wbr />
      <span class="nobr">Low: <input :class="{ input_touched: inputs.low !== params.low }" v-model="inputs.low" /></span><wbr />
      <span class="nobr">High: <input :class="{ input_touched: inputs.high !== params.high }" v-model="inputs.high" /></span><wbr />
      <span class="nobr">Left: <input class="input_small" :class="{ input_touched: inputs.left !== params.left }" v-model="inputs.left" /></span><wbr />
      <span class="nobr">Pixels: <input class="input_small" :class="{ input_touched: inputs.pixels !== params.pixels }" v-model="inputs.pixels" /></span><wbr />
      <span class="nobr">Px-pow: <input class="input_small" :class="{ input_touched: inputs.pixel_pow !== params.pixel_pow }" v-model="inputs.pixel_pow" /></span><wbr />
      <span class="form_button" :class="{ form_button_disabled: !form_touched }" @click="reset_inputs">⨯</span><wbr />
      <span class="form_button" :class="{ form_button_disabled: !form_non_default }" @click="restore_inputs">←</span><wbr />
      <span class="form_button" @click="trigger_reload">↓</span>
    </form>
  </div>
  <Section name="Options" visible>
    <table>
      <tr v-for="opt_fmt in opt_fmts">
        <td>{{ opt_fmt[0] }}:</td>
        <td>{{ opt_fmt[2](opts[opt_fmt[1]]) }}</td>
      </tr>
    </table>
  </Section>
  <!-- Render plots after simulation options have been loaded -->
  <div v-if="loaded">
    <Section :name="section" grid ref="plot_sections" :visible="section === 'General'" triggers_reload v-for="(section_plots, section) in plots">
      <Plot :name="name" :section="section" v-for="(_, name) in section_plots" />
    </Section>
    <Section :name="section" grid ref="heatmap_sections" triggers_reload v-for="(section_heatmaps, section) in heatmaps">
      <Plot is_heatmap :name="name" :section="section" v-for="(_, name) in section_heatmaps" />
    </Section>
  </div>
</template>

<script setup>
import { onMounted, provide, useTemplateRef, ref, watch } from 'vue'

import Plot from './Plot.vue'
import Section from './Section.vue'

const root = window.location.href
const id = v => v
const hex = v => v !== undefined ? `0x${v.toString(16)}` : ''
const hex_pow = v => v !== undefined ? `0x${(2 ** v).toString(16)}` : ''
const disabled = v => v ? 'disabled' : 'enabled'

const opt_fmts = [
  ['Ancestor', 'anc', id],
  ['Architecture', 'arch', id],
  ['Auto-save interval', 'auto_save_pow', hex_pow],
  ['Clones', 'clones', id],
  ['Cores', 'cores', id],
  ['Data push interval', 'data_push_pow', hex_pow],
  ['Mutator flip bit', 'muta_flip', id],
  ['Mutator range', 'muta_pow', hex_pow],
  ['Memory vector size', 'mvec_pow', hex_pow],
  ['Save file compression', 'no_compress', disabled],
  ['Seed', 'seed', hex],
]

let visible_plot_tables = []
let visible_heatmap_tables = []
let query_timeout = null
let plot_low = 0
let plot_redraw = false
let mvec_size = 0
let reload_triggered = false

const int_max = Number.MAX_SAFE_INTEGER
const uint32_max = (2 ** 32) - 1
const hm_max_pixels = 2 ** 11

let defaults = {
  rows: 2000,
  nth: 1,
  axis: 'rowid',
  low: hex(0),
  high: hex(int_max),
  left: hex(0),
  pixels: hex(2 ** 10),
  pixel_pow: hex(0),
}

const axes = ref(['rowid', 'step'])
const inputs = ref({ ...defaults })
const params = ref({ ...defaults })
const form_touched = ref(false)
const form_non_default = ref(false)

const opts = ref({})
const plots = ref({})
const heatmaps = ref({})
const loaded = ref(false)

const query_in_progress = ref(false)
const data = ref([])

const top_pad = useTemplateRef('top_pad')
const top_bar = useTemplateRef('top_bar')
const plot_sections = useTemplateRef('plot_sections')
const heatmap_sections = useTemplateRef('heatmap_sections')

const adjust_top_bar = () => top_pad.value.style.height = `${Math.round(top_bar.value.getBoundingClientRect().height)}px`

const update_visible_tables = () => {
  const plot_section_visibility = plot_sections.value.map(section => section.visible)
  const heatmap_section_visibility = heatmap_sections.value.map(section => section.visible)
  visible_plot_tables = Object.entries(plots.value).filter((_, i) => plot_section_visibility[i]).map((section, _) => [...new Set(Object.entries(section[1]).map(plot => plot[1].table))]).flat()
  visible_heatmap_tables = Object.entries(heatmaps.value).filter((_, i) => heatmap_section_visibility[i]).map((section, _) => [...new Set(Object.entries(section[1]).map(plot => plot[1].table))]).flat()
}

const sanitize = (field, min, max, fmt, override = null) => {
  if (isNaN(Number(inputs.value[field])) || inputs.value[field] === '' || inputs.value[field] < min || inputs.value[field] >= max) {
    inputs.value[field] = override !== null ? fmt(Number(override)) : defaults[field]
  } else {
    inputs.value[field] = fmt(Number(inputs.value[field]))
  }
}

const max_pixel_pow = () => Math.floor(Math.log2((mvec_size - Number(inputs.value.left)) / Number(inputs.value.pixels)))
const check_form_touched = () => form_touched.value = !Object.keys(inputs.value).every(key => inputs.value[key] === params.value[key])
const check_form_non_default = () => form_non_default.value = !Object.keys(params.value).every(key => params.value[key] === defaults[key])

const on_form_change = () => {
  sanitize('rows', 1, uint32_max, id)
  sanitize('nth', 1, uint32_max, id)
  sanitize('low', 0, int_max, hex)
  sanitize('high', 1, int_max, hex)

  if (opts.value.mvec_loop) {
    sanitize('left', 0, uint32_max, hex)
    sanitize('pixels', 1, hm_max_pixels, hex)
    sanitize('pixel_pow', 0, uint32_max, hex)
  } else {
    sanitize('left', 0, mvec_size, hex)
    sanitize('pixels', 1, hm_max_pixels, hex)
    sanitize('pixel_pow', 0, max_pixel_pow(), hex, max_pixel_pow())
  }

  check_form_touched()
}

const trigger_reload = () => {
  reload_triggered = true
  query()
}

const reset_inputs = () => {
  inputs.value = { ...params.value }
  on_form_change()
}

const restore_inputs = () => {
  inputs.value = { ...defaults }
  on_form_change()
}

const query_table = async (table, is_heatmap, high_now) => {
  const url_params = {
    table: table,
    rows: params.value.rows,
    nth: params.value.nth,
    axis: params.value.axis,
    low: plot_low,
    high: high_now,
    is_eva: is_heatmap,
    ...is_heatmap ? {
      left: Number(params.value.left),
      pixels: Number(params.value.pixels),
      pixel_pow: Number(params.value.pixel_pow),
    } : {},
  }

  const search_params = new URLSearchParams(url_params)
  const resp_table = await fetch(root + `data?${search_params}`, { method: 'GET' })
  const text_table = await resp_table.text()

  return JSON.parse(text_table)
}

const query = async () => {
  if (query_in_progress.value) return

  clearTimeout(query_timeout)
  query_in_progress.value = true

  if (reload_triggered) {
    update_visible_tables()

    params.value = { ...inputs.value }
    plot_low = Number(params.value.low)
    plot_redraw = true

    check_form_touched()
    check_form_non_default()

    reload_triggered = false
  }

  const high_params = new URLSearchParams({ axis: params.value.axis })
  const resp_high = await fetch(root + `high?${high_params}`, { method: 'GET' })
  const text_high = await resp_high.text()
  const json_high = JSON.parse(text_high)
  const high_max = json_high.high + 1
  const high_val = Number(params.value.high)
  const high_now = high_max < high_val ? high_max : high_val;

  const plot_query_results = await Promise.all(visible_plot_tables.map(table => query_table(table, false, high_now)))
  const heatmap_query_results = await Promise.all(visible_heatmap_tables.map(table => query_table(table, true, high_now)))
  const plot_query_values = Object.fromEntries(visible_plot_tables.map((table, i) => [table, plot_query_results[i]]))
  const heatmap_query_values = Object.fromEntries(visible_heatmap_tables.map((table, i) => [table, heatmap_query_results[i]]))

  // Keep track of the highest x-axis value fetched so far.
  // Future queries will set this as the minimum, which prevents re-fetching already stored data.
  plot_low = high_now

  data.value = { redraw: plot_redraw, plot_values: plot_query_values, heatmap_values: heatmap_query_values }
  plot_redraw = false

  query_in_progress.value = false

  if (reload_triggered) {
    query()
  } else {
    query_timeout = setTimeout(query, 10000)
  }
}

const with_big_ints = (_, val, { source }) => {
  if (Number.isInteger(val) && !Number.isSafeInteger(val)) {
    try { return BigInt(source) } catch {}
  }

  return val
}

onMounted(async () => {
  const resp_opts = await fetch(root + 'opts', { method: 'GET' })
  const resp_plots = await fetch(root + 'plots', { method: 'GET' })
  const resp_heatmaps = await fetch(root + 'heatmaps', { method: 'GET' })

  opts.value = JSON.parse(await resp_opts.text(), with_big_ints)
  plots.value = JSON.parse(await resp_plots.text())
  heatmaps.value = JSON.parse(await resp_heatmaps.text())
  loaded.value = true

  mvec_size = 2 ** opts.value.mvec_pow
  defaults.pixel_pow = hex(max_pixel_pow())
  inputs.value.pixel_pow = defaults.pixel_pow
  params.value.pixel_pow = defaults.pixel_pow

  // All tables should include one cycle column for each core.
  // This allows normalizing the plots against each core's cycle count
  // (i.e. making `cycl_#` the plots' x-axis).
  axes.value.push(...Array(opts.value.cores).keys().map(i => `cycl_${i}`))
})

watch(loaded, _ => {
  window.addEventListener('resize', adjust_top_bar)

  adjust_top_bar()
  update_visible_tables()
  query()
}, { flush: 'post' })

provide('plots', plots)
provide('heatmaps', heatmaps)
provide('params', params)
provide('data', data)
provide('trigger_reload', trigger_reload)
</script>

<style>
html {
  background-color: black;
  color: gray;
  font-family: sans-serif;
}

h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0;
}

input, select {
  background-color: gray;
  border: none;
  color: black;
  font-family: monospace;
  font-size: 12px;
  margin: 0 4px;
  padding: 2px;
  width: 120px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  height: 100%;
  width: 100%;
}

tr:nth-child(odd) {
  background-color: #111;
}

td {
  font-family: monospace;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.top_bar {
  background-color: #000;
  border-bottom: 1px solid gray;
  left: 0;
  padding: 8px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.opts_name {
  color: #b58900;
  font-weight: normal;
}

.nobr {
  font-size: 12px;
  line-height: 28px;
  margin-right: 6px;
  white-space: nowrap;
}

.input_small {
  width: 80px;
}

.input_touched {
  background-color: #b58900;
}

.form_button {
  background-color: black;
  border: 1.5px solid #b58900;
  color: #b58900;
  cursor: pointer;
  display: inline-block;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  height: 16px;
  line-height: 16px;
  margin: 0 4px;
  padding: 2px;
  text-align: center;
  width: 16px;
}

.form_button_disabled {
  border-color: gray;
  color: gray;
  cursor: default;
  opacity: 0.5;
}
</style>