Adds more heatmaps

1 files changed, 23 insertions, 15 deletions

diff --git a/data/vue/App.vue b/data/vue/App.vue
index f8f4b41..cb04565 100644
--- a/data/vue/App.vue
+++ b/data/vue/App.vue
@@ -9,14 +9,14 @@
       </span>
     </h1>
     <form @change="trigger_reload">
-      <span class="nobr">Entries: <input v-model="entries" /></span><wbr />
-      <span class="nobr">nth: <input v-model="nth" /></span><wbr />
-      <span class="nobr">X-axis: <select v-model="x_axis"><option v-for="axis in x_axes">{{ axis }}</option></select></span><wbr />
+      <span class="nobr">Entries: <input class="input_small" v-model="entries" /></span><wbr />
+      <span class="nobr">nth: <input class="input_small" v-model="nth" /></span><wbr />
+      <span class="nobr">X-axis: <select class="input_small" v-model="x_axis"><option v-for="axis in x_axes">{{ axis }}</option></select></span><wbr />
       <span class="nobr">X-low: <input v-model="x_low" /></span><wbr />
       <span class="nobr">X-high: <input v-model="x_high" /></span><wbr />
-      <span class="nobr">Left: <input v-model="hm_left" /></span><wbr />
-      <span class="nobr">Px-count: <input v-model="hm_px_count" /></span><wbr />
-      <span class="nobr">Px-pow: <input v-model="hm_px_pow" /></span><wbr />
+      <span class="nobr">Left: <input class="input_small" v-model="hm_left" /></span><wbr />
+      <span class="nobr">Px-count: <input class="input_small" v-model="hm_px_count" /></span><wbr />
+      <span class="nobr">Px-pow: <input class="input_small" v-model="hm_px_pow" /></span><wbr />
       <span class="reset_button" @click="reset_inputs">↻</span>
     </form>
   </div>
@@ -72,6 +72,7 @@ let plot_x_low = 0
 let plot_redraw = false
 let mvec_size = 0
 
+const int_max = Number.MAX_SAFE_INTEGER
 const uint32_max = (2 ** 32) - 1
 const hm_max_pixels = 2 ** 11
 
@@ -79,7 +80,7 @@ const entries_def = 2000
 const nth_def = 1
 const x_axis_def = 'rowid'
 const x_low_def = hex(0)
-const x_high_def = hex(uint32_max)
+const x_high_def = hex(int_max)
 const hm_left_def = hex(0)
 const hm_px_count_def = hex(2 ** 10)
 
@@ -106,6 +107,8 @@ 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)
@@ -124,18 +127,18 @@ const max_hm_px_pow = () => Math.floor(Math.log2((mvec_size - Number(hm_left.val
 const trigger_reload = () => {
   update_visible_tables()
 
-  sanitize(entries, 1, uint32_max, 2000, id)
-  sanitize(nth, 1, uint32_max, 1, id)
-  sanitize(x_low, 0, uint32_max, 0, hex)
-  sanitize(x_high, 1, uint32_max, uint32_max, hex)
+  sanitize(entries, 1, uint32_max, entries_def, id)
+  sanitize(nth, 1, uint32_max, nth_def, id)
+  sanitize(x_low, 0, int_max, 0, hex)
+  sanitize(x_high, 1, int_max, int_max, hex)
 
   if (opts.value.mvec_loop) {
     sanitize(hm_left, 0, uint32_max, 0, hex)
-    sanitize(hm_px_count, 1, hm_max_pixels, hm_max_pixels, hex)
+    sanitize(hm_px_count, 1, hm_max_pixels, 2 ** 10, hex)
     sanitize(hm_px_pow, 0, uint32_max, uint32_max, hex)
   } else {
     sanitize(hm_left, 0, mvec_size, 0, hex)
-    sanitize(hm_px_count, 1, hm_max_pixels, hm_max_pixels, hex)
+    sanitize(hm_px_count, 1, hm_max_pixels, 2 ** 10, hex)
     sanitize(hm_px_pow, 0, max_hm_px_pow(), max_hm_px_pow(), hex)
   }
 
@@ -239,8 +242,9 @@ onMounted(async () => {
 })
 
 watch(loaded, _ => {
-  top_pad.value.style.height = `${Math.round(top_bar.value.getBoundingClientRect().height)}px`
+  window.addEventListener('resize', adjust_top_bar)
 
+  adjust_top_bar()
   update_visible_tables()
   query()
 }, { flush: 'post' })
@@ -277,7 +281,7 @@ input, select {
   font-size: 12px;
   margin: 0 4px;
   padding: 2px;
-  width: 80px;
+  width: 120px;
 }
 
 table {
@@ -321,6 +325,10 @@ td {
   white-space: nowrap;
 }
 
+.input_small {
+  width: 80px;
+}
+
 .reset_button {
   background-color: black;
   border: 1.5px solid gray;