heatmaps: part 8

website/scripts/explorer/mempool.js

@@ -1,5 +1,6 @@
 import { createCube } from "./cube.js";
 import { formatFeeRate } from "./render.js";
+import { createSpan } from "../utils/dom.js";
 
 const NUM_BLOCKS = 8;
 
@@ -73,14 +74,12 @@ function updateMempoolCube(cube, block, position) {
 
   cube.leftFace.textContent = "";
   const median = document.createElement("p");
-  const tilde = document.createElement("span");
+  const tilde = createSpan("~");
   tilde.classList.add("dim");
-  tilde.textContent = "~";
   median.append(tilde, formatFeeRate(block.medianFee));
   const range = document.createElement("p");
-  const dash = document.createElement("span");
+  const dash = createSpan("-");
   dash.classList.add("dim");
-  dash.textContent = "-";
   range.append(formatFeeRate(block.feeRange[0]), dash, formatFeeRate(block.feeRange[6]));
   const unit = document.createElement("p");
   unit.classList.add("dim");

website/scripts/options/full.js

@@ -1,5 +1,9 @@
 import { createPartialOptions } from "./partial.js";
-import { createButtonElement, createAnchorElement } from "../utils/dom.js";
+import {
+  createAnchorElement,
+  createButtonElement,
+  createSmall,
+} from "../utils/dom.js";
 import { pushHistory, resetParams } from "../utils/url.js";
 import { readStored, writeToStorage } from "../utils/storage.js";
 import { stringToId } from "../utils/format.js";
@@ -395,9 +399,7 @@ export function initOptions() {
         details.append(summary);
         summary.append(node.name);
 
-        const count = window.document.createElement("small");
+        summary.append(createSmall(`[${node.count.toLocaleString("en-us")}]`));
-        count.textContent = `[${node.count.toLocaleString("en-us")}]`;
-        summary.append(count);
 
         let built = false;
         if (autoOpen && isOnSelectedPath(node.path)) {

website/scripts/utils/chart/legend.js

@@ -1,4 +1,4 @@
-import { createLabeledInput, createSpanName } from "../dom.js";
+import { createLabeledInput, createSpan, createSpanName } from "../dom.js";
 import { stringToId } from "../format.js";
 
 /** @param {HTMLElement} el */
@@ -27,8 +27,7 @@ export function createLegend() {
   element.append(scroller);
   captureScroll(scroller);
 
-  const separator = window.document.createElement("span");
+  const separator = createSpan("|");
-  separator.textContent = "|";
   captureScroll(separator);
 
   return {

website/scripts/utils/dom.js

@@ -41,6 +41,15 @@ export function createSpan(text) {
   return span;
 }
 
+/**
+ * @param {string} text
+ */
+export function createSmall(text) {
+  const small = window.document.createElement("small");
+  small.textContent = text;
+  return small;
+}
+
 /**
  * @param {string} name
  */
@@ -335,9 +344,7 @@ export function createSelect({
 
   const remaining = choices.length - 1;
   if (remaining > 0) {
-    const small = window.document.createElement("small");
+    element.append(createSmall(`+${remaining}`));
-    small.textContent = `+${remaining}`;
-    element.append(small);
     element.append(createSpan("↓"));
   }
 

website/src/heatmap/grid.js

@@ -113,7 +113,7 @@ export function createAverageGrid({
           if (col < 0 || col >= cols || dates.length === 0) {
             return emptyRange();
           }
-          const start = Math.floor((col * dates.length) / cols);
+          const start = Math.ceil((col * dates.length) / cols);
           const end = Math.floor(((col + 1) * dates.length - 1) / cols);
           return { start, end: clamp(end, start, dates.length - 1) };
         },

website/src/heatmap/index.js

@@ -109,7 +109,10 @@ function loadRange() {
   let failed = 0;
   updateStatus(completed, currentDates.length, failed);
 
-  if (!missing.length) return;
+  if (!missing.length) {
+    abortController = undefined;
+    return;
+  }
 
   let cursor = 0;
   const workers = Array.from({
@@ -264,7 +267,7 @@ function createRangeControls() {
     onChange(choice) {
       fromChoice = choice;
       if (fromChoice.date > toChoice.date) {
-        toChoice = findMatchingChoice(toChoices, fromChoice);
+        toChoice = findSameLabelChoice(toChoices, fromChoice, toChoices[0]);
         toSelect.set(toChoice);
       }
       setRange(fromChoice.date, toChoice.date);
@@ -280,7 +283,7 @@ function createRangeControls() {
     onChange(choice) {
       toChoice = choice;
       if (fromChoice.date > toChoice.date) {
-        fromChoice = findMatchingChoice(fromChoices, toChoice);
+        fromChoice = findSameLabelChoice(fromChoices, toChoice, fromChoices[0]);
         fromSelect.set(fromChoice);
       }
       setRange(fromChoice.date, toChoice.date);
@@ -330,10 +333,11 @@ function rangeChoiceLabel(choice) {
 
 /**
  * @param {readonly RangeChoice[]} choices
- * @param {RangeChoice} selected
+ * @param {RangeChoice} choice
+ * @param {RangeChoice} fallback
  */
-function findMatchingChoice(choices, selected) {
+function findSameLabelChoice(choices, choice, fallback) {
-  return choices.find((choice) => choice.label === selected.label) ?? choices[0];
+  return choices.find((candidate) => candidate.label === choice.label) ?? fallback;
 }
 
 /**