From a7a5bfe19abc50dddbf1a09fce04fb2f6d35f19c Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Thu, 16 May 2024 16:09:47 -0700
Subject: [PATCH 01/22] Auto-format explorer index.js

---
 crates/explorer/src/index.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 629d73ff415f..ccf4e6a23fab 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -32,7 +32,7 @@ const offsetToHue = new Map();
 
 // Get the hue for the given offset, or assign it a new one if it doesn't have
 // one already.
-const hueForOffset = offset => {
+const hueForOffset = (offset) => {
   if (offsetToHue.has(offset)) {
     return offsetToHue.get(offset);
   } else {
@@ -44,7 +44,7 @@ const hueForOffset = offset => {
 
 // Get the hue for the given offset, only if the offset has already been
 // assigned a hue.
-const existingHueForOffset = offset => {
+const existingHueForOffset = (offset) => {
   return offsetToHue.get(offset);
 };
 
@@ -86,7 +86,7 @@ const addAsmElem = (offset, elem) => {
 const watElem = document.getElementById("wat");
 watElem.addEventListener(
   "click",
-  event => {
+  (event) => {
     if (event.target.dataset.wasmOffset == null) {
       return;
     }
@@ -109,7 +109,7 @@ watElem.addEventListener(
 const asmElem = document.getElementById("asm");
 asmElem.addEventListener(
   "click",
-  event => {
+  (event) => {
     if (event.target.dataset.wasmOffset == null) {
       return;
     }
@@ -129,7 +129,7 @@ asmElem.addEventListener(
   { passive: true },
 );
 
-const onMouseEnter = event => {
+const onMouseEnter = (event) => {
   if (event.target.dataset.wasmOffset == null) {
     return;
   }
@@ -141,7 +141,7 @@ const onMouseEnter = event => {
   }
 };
 
-const onMouseLeave = event => {
+const onMouseLeave = (event) => {
   if (event.target.dataset.wasmOffset == null) {
     return;
   }
@@ -159,12 +159,12 @@ const repeat = (s, n) => {
   return s.repeat(n >= 0 ? n : 0);
 };
 
-const renderAddress = addr => {
+const renderAddress = (addr) => {
   let hex = addr.toString(16);
   return repeat("0", 8 - hex.length) + hex;
 };
 
-const renderBytes = bytes => {
+const renderBytes = (bytes) => {
   let s = "";
   for (let i = 0; i < bytes.length; i++) {
     if (i != 0) {

From 7bdb73f769663542fff965156c1607e2c3096d69 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Thu, 16 May 2024 17:27:11 -0700
Subject: [PATCH 02/22] Use CRC24 to pick colors for offsets in explore

---
 crates/explorer/src/index.js | 74 +++++++++++++++---------------------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index ccf4e6a23fab..b5df132f01cd 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -11,42 +11,32 @@ class State {
 
 const state = (window.STATE = new State(window.WAT, window.ASM));
 
-/*** Hues for Offsets **********************************************************/
+/*** Colors for Offsets **********************************************************/
 
-const hues = [
-  80, 160, 240, 320, 40, 120, 200, 280, 20, 100, 180, 260, 340, 60, 140, 220,
-  300,
-];
+const offsetToRgb = new Map();
 
-const nextHue = (function () {
-  let i = 0;
-  return () => {
-    return hues[++i % hues.length];
-  };
-})();
-
-// NB: don't just assign hues based on something simple like `hues[offset %
-// hues.length]` since that can suffer from bias due to certain alignments
-// happening more or less frequently.
-const offsetToHue = new Map();
-
-// Get the hue for the given offset, or assign it a new one if it doesn't have
-// one already.
-const hueForOffset = (offset) => {
-  if (offsetToHue.has(offset)) {
-    return offsetToHue.get(offset);
-  } else {
-    let hue = nextHue();
-    offsetToHue.set(offset, hue);
-    return hue;
+// Get the RGB color for the given offset.  (Memoize to avoid recalculating.)
+const rgbForOffset = (offset) => {
+  if (offsetToRgb.has(offset)) {
+    return offsetToRgb.get(offset);
   }
+  const crc24 = (crc, byte) => {
+    crc ^= byte << 16;
+    for (let bit = 0; bit < 8; bit++) {
+      crc = (crc & 0x800000 ? (crc << 1) ^ 0xfa5711 : crc << 1) & 0xffffff;
+    }
+    return crc;
+  };
+  let color;
+  for (color = offset; offset; offset >>= 8)
+    color = crc24(color, offset & 0xff);
+  color = `${(color >> 16) & 0xff}, ${(color >> 8) & 0xff}, ${color & 0xff}`;
+  offsetToRgb.set(offset, color);
+  return color;
 };
 
-// Get the hue for the given offset, only if the offset has already been
-// assigned a hue.
-const existingHueForOffset = (offset) => {
-  return offsetToHue.get(offset);
-};
+const dimColorForOffset = (offset) => `rgba(${rgbForOffset(offset)}, 0.3)`;
+const brightColorForOffset = (offset) => `rgba(${rgbForOffset(offset)}, 0.7)`;
 
 // Get WAT chunk elements by Wasm offset.
 const watByOffset = new Map();
@@ -135,9 +125,9 @@ const onMouseEnter = (event) => {
   }
 
   const offset = parseInt(event.target.dataset.wasmOffset);
-  const hue = hueForOffset(offset);
+  const color = brightColorForOffset(offset);
   for (const elem of anyByOffset.get(offset)) {
-    elem.style.backgroundColor = `hsl(${hue} 75% 80%)`;
+    elem.style.backgroundColor = color;
   }
 };
 
@@ -147,9 +137,9 @@ const onMouseLeave = (event) => {
   }
 
   const offset = parseInt(event.target.dataset.wasmOffset);
-  const hue = hueForOffset(offset);
+  const color = dimColorForOffset(offset);
   for (const elem of anyByOffset.get(offset)) {
-    elem.style.backgroundColor = `hsl(${hue} 50% 95%)`;
+    elem.style.backgroundColor = color;
   }
 };
 
@@ -204,8 +194,7 @@ for (const func of state.asm.functions) {
     instElem.textContent = `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}\n`;
     if (inst.wasm_offset != null) {
       instElem.setAttribute("data-wasm-offset", inst.wasm_offset);
-      const hue = hueForOffset(inst.wasm_offset);
-      instElem.style.backgroundColor = `hsl(${hue} 50% 90%)`;
+      instElem.style.backgroundColor = dimColorForOffset(inst.wasm_offset);
       instElem.addEventListener("mouseenter", onMouseEnter);
       instElem.addEventListener("mouseleave", onMouseLeave);
       addAsmElem(inst.wasm_offset, instElem);
@@ -223,13 +212,10 @@ for (const chunk of state.wat.chunks) {
   const chunkElem = document.createElement("span");
   if (chunk.wasm_offset != null) {
     chunkElem.dataset.wasmOffset = chunk.wasm_offset;
-    const hue = existingHueForOffset(chunk.wasm_offset);
-    if (hue) {
-      chunkElem.style.backgroundColor = `hsl(${hue} 50% 95%)`;
-      chunkElem.addEventListener("mouseenter", onMouseEnter);
-      chunkElem.addEventListener("mouseleave", onMouseLeave);
-      addWatElem(chunk.wasm_offset, chunkElem);
-    }
+    chunkElem.style.backgroundColor = dimColorForOffset(chunk.wasm_offset);
+    chunkElem.addEventListener("mouseenter", onMouseEnter);
+    chunkElem.addEventListener("mouseleave", onMouseLeave);
+    addWatElem(chunk.wasm_offset, chunkElem);
   }
   chunkElem.textContent = chunk.wat;
   watElem.appendChild(chunkElem);

From 503f0549d4a0630c4af9e286fbcab64c62314b09 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Thu, 16 May 2024 21:29:57 -0700
Subject: [PATCH 03/22] Make better use of the DOM

In the ASM view, instead of creating one element per instruction,
create one per WASM chunk.  This significantly reduces the amount
of elements we have to take care of, including event listeners.

For both views, get rid of all the maps to look up DOM elements by
WASM offset and use CSS selectors to find them.  This made things
quite a bit smoother.  To highlight items, we now add a class to
elements with the same WASM offset, and remove it when we don't
want to highlight them anymore.

In addition to this, use a bit more tricks to get brighter colors
from the CRC24 algorithm we're now using to pick the colors.  (Since
the colors can now be very dark, we get the luminance by using the
NTSC color space, or YIQ, and use contrasting colors.)
---
 crates/explorer/src/index.css |   9 ++
 crates/explorer/src/index.js  | 226 ++++++++++++++--------------------
 2 files changed, 100 insertions(+), 135 deletions(-)

diff --git a/crates/explorer/src/index.css b/crates/explorer/src/index.css
index bf52ac021851..8ee24094b8ba 100644
--- a/crates/explorer/src/index.css
+++ b/crates/explorer/src/index.css
@@ -14,6 +14,15 @@ body {
   height: 100%;
 }
 
+.highlight {
+  white-space: pre;
+  font-family: monospace;
+  opacity: 0.75;
+}
+.hovered {
+  opacity: 1;
+}
+
 #wat {
   width: 50%;
   height: 100%;
diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index b5df132f01cd..1508f3ac1b92 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -16,10 +16,24 @@ const state = (window.STATE = new State(window.WAT, window.ASM));
 const offsetToRgb = new Map();
 
 // Get the RGB color for the given offset.  (Memoize to avoid recalculating.)
+
+const rgbToTriple = (rgb) => [
+  (rgb >> 16) & 0xff,
+  (rgb >> 8) & 0xff,
+  rgb & 0xff,
+];
+const rgbToLuminance = (rgb) => {
+  // Use the NTSC color space (https://en.wikipedia.org/wiki/YIQ) to determine
+  // the luminance of this color.
+  let [r, g, b] = rgbToTriple(rgb);
+  return (r * 299.0 + g * 587.0 + b * 114.0) / 1000.0;
+};
+const rgbToCss = (rgb) => `rgb(${rgbToTriple(rgb).join(",")})`;
+
 const rgbForOffset = (offset) => {
-  if (offsetToRgb.has(offset)) {
-    return offsetToRgb.get(offset);
-  }
+  let color = offsetToRgb[offset];
+  if (color !== undefined) return color;
+
   const crc24 = (crc, byte) => {
     crc ^= byte << 16;
     for (let bit = 0; bit < 8; bit++) {
@@ -27,120 +41,19 @@ const rgbForOffset = (offset) => {
     }
     return crc;
   };
-  let color;
+  let orig_offset = offset;
   for (color = offset; offset; offset >>= 8)
     color = crc24(color, offset & 0xff);
-  color = `${(color >> 16) & 0xff}, ${(color >> 8) & 0xff}, ${color & 0xff}`;
-  offsetToRgb.set(offset, color);
+  color = rgbToLuminance(color) > 127 ? color ^ 0xa5a5a5 : color;
+  offsetToRgb[orig_offset] = color;
   return color;
 };
 
-const dimColorForOffset = (offset) => `rgba(${rgbForOffset(offset)}, 0.3)`;
-const brightColorForOffset = (offset) => `rgba(${rgbForOffset(offset)}, 0.7)`;
-
-// Get WAT chunk elements by Wasm offset.
-const watByOffset = new Map();
-
-// Get asm instruction elements by Wasm offset.
-const asmByOffset = new Map();
-
-// Get all (WAT chunk or asm instruction) elements by offset.
-const anyByOffset = new Map();
-
-const addWatElem = (offset, elem) => {
-  if (!watByOffset.has(offset)) {
-    watByOffset.set(offset, []);
-  }
-  watByOffset.get(offset).push(elem);
-
-  if (!anyByOffset.has(offset)) {
-    anyByOffset.set(offset, []);
-  }
-  anyByOffset.get(offset).push(elem);
-};
-
-const addAsmElem = (offset, elem) => {
-  if (!asmByOffset.has(offset)) {
-    asmByOffset.set(offset, []);
-  }
-  asmByOffset.get(offset).push(elem);
-
-  if (!anyByOffset.has(offset)) {
-    anyByOffset.set(offset, []);
-  }
-  anyByOffset.get(offset).push(elem);
-};
-
-/*** Event Handlers ************************************************************/
-
-const watElem = document.getElementById("wat");
-watElem.addEventListener(
-  "click",
-  (event) => {
-    if (event.target.dataset.wasmOffset == null) {
-      return;
-    }
-
-    const offset = parseInt(event.target.dataset.wasmOffset);
-    if (!asmByOffset.get(offset)) {
-      return;
-    }
-
-    const firstAsmElem = asmByOffset.get(offset)[0];
-    firstAsmElem.scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-      inline: "nearest",
-    });
-  },
-  { passive: true },
-);
-
-const asmElem = document.getElementById("asm");
-asmElem.addEventListener(
-  "click",
-  (event) => {
-    if (event.target.dataset.wasmOffset == null) {
-      return;
-    }
-
-    const offset = parseInt(event.target.dataset.wasmOffset);
-    if (!watByOffset.get(offset)) {
-      return;
-    }
-
-    const firstWatElem = watByOffset.get(offset)[0];
-    firstWatElem.scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-      inline: "nearest",
-    });
-  },
-  { passive: true },
-);
-
-const onMouseEnter = (event) => {
-  if (event.target.dataset.wasmOffset == null) {
-    return;
-  }
-
-  const offset = parseInt(event.target.dataset.wasmOffset);
-  const color = brightColorForOffset(offset);
-  for (const elem of anyByOffset.get(offset)) {
-    elem.style.backgroundColor = color;
-  }
-};
-
-const onMouseLeave = (event) => {
-  if (event.target.dataset.wasmOffset == null) {
-    return;
-  }
-
-  const offset = parseInt(event.target.dataset.wasmOffset);
-  const color = dimColorForOffset(offset);
-  for (const elem of anyByOffset.get(offset)) {
-    elem.style.backgroundColor = color;
-  }
+const adjustColorForOffset = (element, offset) => {
+  let backgroundColor = rgbForOffset(offset);
+  element.style.backgroundColor = rgbToCss(backgroundColor);
+  element.style.color =
+    rgbToLuminance(backgroundColor) > 128 ? "#101010" : "#dddddd";
 };
 
 /*** Rendering *****************************************************************/
@@ -174,8 +87,41 @@ const renderInst = (mnemonic, operands) => {
   }
 };
 
-// Render the ASM.
+const linkElements = (element) => {
+  const eachElementWithSameWasmOff = (event, closure) => {
+    let offset = event.target.dataset.wasmOffset;
+    if (offset !== null) {
+      let elems = document.querySelectorAll(`[data-wasm-offset="${offset}"]`);
+      for (const elem of elems) closure(elem);
+    }
+  };
+  element.addEventListener("click", (event) => {
+    eachElementWithSameWasmOff(event, (elem) =>
+      elem.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      }),
+    );
+  });
+  element.addEventListener("mouseenter", (event) =>
+    eachElementWithSameWasmOff(event, (elem) => elem.classList.add("hovered")),
+  );
+  element.addEventListener("mouseleave", (event) =>
+    eachElementWithSameWasmOff(event, (elem) =>
+      elem.classList.remove("hovered"),
+    ),
+  );
+};
 
+const createDivForCode = () => {
+  let div = document.createElement("div");
+  div.classList.add("highlight");
+  return div;
+};
+
+// Render the ASM.
+let lastOffset = null;
 for (const func of state.asm.functions) {
   const funcElem = document.createElement("div");
 
@@ -188,35 +134,45 @@ for (const func of state.asm.functions) {
   funcHeader.title = `Function ${func.func_index}: ${func_name}`;
   funcElem.appendChild(funcHeader);
 
-  const bodyElem = document.createElement("pre");
+  let currentBlock = createDivForCode();
+  let disasmBuffer = [];
+
+  const addCurrentBlock = (offset) => {
+    currentBlock.setAttribute("data-wasm-offset", offset);
+    if (offset !== null) adjustColorForOffset(currentBlock, offset);
+    currentBlock.innerText = disasmBuffer.join("\n");
+    linkElements(currentBlock);
+    funcElem.appendChild(currentBlock);
+    disasmBuffer = [];
+  };
+
   for (const inst of func.instructions) {
-    const instElem = document.createElement("span");
-    instElem.textContent = `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}\n`;
-    if (inst.wasm_offset != null) {
-      instElem.setAttribute("data-wasm-offset", inst.wasm_offset);
-      instElem.style.backgroundColor = dimColorForOffset(inst.wasm_offset);
-      instElem.addEventListener("mouseenter", onMouseEnter);
-      instElem.addEventListener("mouseleave", onMouseLeave);
-      addAsmElem(inst.wasm_offset, instElem);
+    if (lastOffset !== inst.wasm_offset) {
+      addCurrentBlock(inst.wasm_offset);
+      currentBlock = createDivForCode();
+      lastOffset = inst.wasm_offset;
     }
-    bodyElem.appendChild(instElem);
+
+    disasmBuffer.push(
+      `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
+    );
   }
-  funcElem.appendChild(bodyElem);
+  addCurrentBlock(lastOffset);
 
-  asmElem.appendChild(funcElem);
+  document.getElementById("asm").appendChild(funcElem);
 }
 
 // Render the WAT.
-
 for (const chunk of state.wat.chunks) {
-  const chunkElem = document.createElement("span");
-  if (chunk.wasm_offset != null) {
-    chunkElem.dataset.wasmOffset = chunk.wasm_offset;
-    chunkElem.style.backgroundColor = dimColorForOffset(chunk.wasm_offset);
-    chunkElem.addEventListener("mouseenter", onMouseEnter);
-    chunkElem.addEventListener("mouseleave", onMouseLeave);
-    addWatElem(chunk.wasm_offset, chunkElem);
+  if (chunk.wasm_offset === null) continue;
+  const block = createDivForCode();
+  block.dataset.wasmOffset = chunk.wasm_offset;
+  block.innerText = chunk.wat;
+
+  if (offsetToRgb[chunk.wasm_offset] !== undefined) {
+    adjustColorForOffset(block, chunk.wasm_offset);
+    linkElements(block);
   }
-  chunkElem.textContent = chunk.wat;
-  watElem.appendChild(chunkElem);
+
+  document.getElementById("wat").appendChild(block);
 }

From 83029d2016efdbbf7db4e24363af33e1e9c2017e Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 00:11:25 -0700
Subject: [PATCH 04/22] Draw polygon bridging WAT and ASM views

---
 crates/explorer/src/index.css | 20 ++++++++-
 crates/explorer/src/index.js  | 80 +++++++++++++++++++++--------------
 crates/explorer/src/lib.rs    |  1 +
 3 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/crates/explorer/src/index.css b/crates/explorer/src/index.css
index 8ee24094b8ba..1e6d0d7c8eac 100644
--- a/crates/explorer/src/index.css
+++ b/crates/explorer/src/index.css
@@ -17,10 +17,26 @@ body {
 .highlight {
   white-space: pre;
   font-family: monospace;
-  opacity: 0.75;
 }
 .hovered {
-  opacity: 1;
+}
+.light-text {
+  color: #dddddd;
+}
+.dark-text {
+  color: #101010;
+}
+
+#bridge {
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  bottom: 0px;
+  height: 100%;
+  width: 16px;
+  background-color: red;
+  clip-path: polygon(0px 0px, 0px 10px, 20px 100px, 100px 100px);
+  display: none;
 }
 
 #wat {
diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 1508f3ac1b92..6eb2b469fba9 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -13,27 +13,22 @@ const state = (window.STATE = new State(window.WAT, window.ASM));
 
 /*** Colors for Offsets **********************************************************/
 
-const offsetToRgb = new Map();
-
-// Get the RGB color for the given offset.  (Memoize to avoid recalculating.)
-
-const rgbToTriple = (rgb) => [
-  (rgb >> 16) & 0xff,
-  (rgb >> 8) & 0xff,
-  rgb & 0xff,
-];
-const rgbToLuminance = (rgb) => {
+const rgbToLuma = (rgb) => {
   // Use the NTSC color space (https://en.wikipedia.org/wiki/YIQ) to determine
   // the luminance of this color.
   let [r, g, b] = rgbToTriple(rgb);
   return (r * 299.0 + g * 587.0 + b * 114.0) / 1000.0;
 };
-const rgbToCss = (rgb) => `rgb(${rgbToTriple(rgb).join(",")})`;
-
+const rgbToTriple = (rgb) => [
+  (rgb >> 16) & 0xff,
+  (rgb >> 8) & 0xff,
+  rgb & 0xff,
+];
+// Get the RGB color for the given offset.  (Memoize to avoid recalculating.)
+const offsetToRgb = new Map();
 const rgbForOffset = (offset) => {
   let color = offsetToRgb[offset];
   if (color !== undefined) return color;
-
   const crc24 = (crc, byte) => {
     crc ^= byte << 16;
     for (let bit = 0; bit < 8; bit++) {
@@ -44,16 +39,17 @@ const rgbForOffset = (offset) => {
   let orig_offset = offset;
   for (color = offset; offset; offset >>= 8)
     color = crc24(color, offset & 0xff);
-  color = rgbToLuminance(color) > 127 ? color ^ 0xa5a5a5 : color;
+  color = rgbToLuma(color) > 127 ? color ^ 0xa5a5a5 : color;
   offsetToRgb[orig_offset] = color;
   return color;
 };
-
+const rgbToCss = (rgb) => `rgba(${rgbToTriple(rgb).join(",")})`;
 const adjustColorForOffset = (element, offset) => {
   let backgroundColor = rgbForOffset(offset);
   element.style.backgroundColor = rgbToCss(backgroundColor);
-  element.style.color =
-    rgbToLuminance(backgroundColor) > 128 ? "#101010" : "#dddddd";
+  element.classList.add(
+    rgbToLuma(backgroundColor) > 128 ? "dark-text" : "light-text",
+  );
 };
 
 /*** Rendering *****************************************************************/
@@ -88,11 +84,12 @@ const renderInst = (mnemonic, operands) => {
 };
 
 const linkElements = (element) => {
+  const selector = (offset) =>
+    document.querySelectorAll(`[data-wasm-offset="${offset}"]`);
   const eachElementWithSameWasmOff = (event, closure) => {
     let offset = event.target.dataset.wasmOffset;
     if (offset !== null) {
-      let elems = document.querySelectorAll(`[data-wasm-offset="${offset}"]`);
-      for (const elem of elems) closure(elem);
+      for (const elem of selector(offset)) closure(elem);
     }
   };
   element.addEventListener("click", (event) => {
@@ -104,14 +101,33 @@ const linkElements = (element) => {
       }),
     );
   });
-  element.addEventListener("mouseenter", (event) =>
-    eachElementWithSameWasmOff(event, (elem) => elem.classList.add("hovered")),
-  );
-  element.addEventListener("mouseleave", (event) =>
+  element.addEventListener("mouseenter", (event) => {
+    let offset = event.target.dataset.wasmOffset;
+    if (offset === null) return;
+    let elems = selector(offset);
+    let rect0 = elems[0].getBoundingClientRect();
+    let rect1 = elems[1].getBoundingClientRect();
+    if (rect0.x > rect1.x) {
+      [rect0, rect1] = [rect1, rect0];
+    }
+    let bridge = document.getElementById("bridge");
+    if (rect0.y < 0 || rect0.bottom < 0) {
+      bridge.style.display = "none";
+    } else {
+      bridge.style.display = "block";
+      bridge.style.left = `${rect0.width}px`;
+      bridge.style.clipPath = `polygon(0 ${rect0.y}px, 100% ${rect1.y}px, 100% ${rect1.bottom}px, 0 ${rect0.bottom}px)`;
+      bridge.style.backgroundColor = elems[0].style.backgroundColor;
+    }
+    elems[0].classList.add("hovered");
+    elems[1].classList.add("hovered");
+  });
+  element.addEventListener("mouseleave", (event) => {
+    document.getElementById("bridge").style.display = "none";
     eachElementWithSameWasmOff(event, (elem) =>
       elem.classList.remove("hovered"),
-    ),
-  );
+    );
+  });
 };
 
 const createDivForCode = () => {
@@ -139,23 +155,25 @@ for (const func of state.asm.functions) {
 
   const addCurrentBlock = (offset) => {
     currentBlock.setAttribute("data-wasm-offset", offset);
-    if (offset !== null) adjustColorForOffset(currentBlock, offset);
+    if (offset !== null) {
+      adjustColorForOffset(currentBlock, offset);
+      linkElements(currentBlock);
+    }
+
     currentBlock.innerText = disasmBuffer.join("\n");
-    linkElements(currentBlock);
     funcElem.appendChild(currentBlock);
     disasmBuffer = [];
   };
 
   for (const inst of func.instructions) {
+    disasmBuffer.push(
+      `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
+    );
     if (lastOffset !== inst.wasm_offset) {
       addCurrentBlock(inst.wasm_offset);
       currentBlock = createDivForCode();
       lastOffset = inst.wasm_offset;
     }
-
-    disasmBuffer.push(
-      `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
-    );
   }
   addCurrentBlock(lastOffset);
 
diff --git a/crates/explorer/src/lib.rs b/crates/explorer/src/lib.rs
index cd9c4e3fc4ad..131700c65ff0 100644
--- a/crates/explorer/src/lib.rs
+++ b/crates/explorer/src/lib.rs
@@ -37,6 +37,7 @@ pub fn generate(
   <body class="hbox">
     <pre id="wat"></pre>
     <div id="asm"></div>
+    <div id="bridge" class="hovered"></div>
     <script>
       window.WAT = {wat_json};
       window.ASM = {asm_json};

From ed880167c5b0ceca9a393423d3bbc93c2e9d373d Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 00:25:00 -0700
Subject: [PATCH 05/22] Scale luma calculation to a power of two to avoid
 integer division

---
 crates/explorer/src/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 6eb2b469fba9..ccd38e71415d 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -15,9 +15,10 @@ const state = (window.STATE = new State(window.WAT, window.ASM));
 
 const rgbToLuma = (rgb) => {
   // Use the NTSC color space (https://en.wikipedia.org/wiki/YIQ) to determine
-  // the luminance of this color.
+  // the luminance of this color.  (This is scaled to a power of two so we can
+  // shift by 10 instead of dividing by 1000.)
   let [r, g, b] = rgbToTriple(rgb);
-  return (r * 299.0 + g * 587.0 + b * 114.0) / 1000.0;
+  return (r * 306 + g * 601 + b * 116) >> 10;
 };
 const rgbToTriple = (rgb) => [
   (rgb >> 16) & 0xff,

From e831cc4c8e8e173f2466d57c3dc82df276ff06c3 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 08:15:44 -0700
Subject: [PATCH 06/22] Outline hovered lines

Instead of using opacity, which slow down rendering, use a solid
outline, which looks nicer and is more efficient!
---
 crates/explorer/src/index.css |  2 +-
 crates/explorer/src/index.js  | 41 ++++++++++++++++++++++-------------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/crates/explorer/src/index.css b/crates/explorer/src/index.css
index 1e6d0d7c8eac..661910e41e5e 100644
--- a/crates/explorer/src/index.css
+++ b/crates/explorer/src/index.css
@@ -21,7 +21,7 @@ body {
 .hovered {
 }
 .light-text {
-  color: #dddddd;
+  color: #eeeeee;
 }
 .dark-text {
   color: #101010;
diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index ccd38e71415d..3893b53fc2de 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -93,18 +93,24 @@ const linkElements = (element) => {
       for (const elem of selector(offset)) closure(elem);
     }
   };
-  element.addEventListener("click", (event) => {
-    eachElementWithSameWasmOff(event, (elem) =>
-      elem.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "nearest",
-      }),
-    );
-  });
+  element.addEventListener(
+    "click",
+    (event) => {
+      document.getElementById("bridge").style.display = "none";
+      eachElementWithSameWasmOff(event, (elem) => {
+        elem.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest",
+        });
+      });
+    },
+    { passive: true },
+  );
   element.addEventListener("mouseenter", (event) => {
     let offset = event.target.dataset.wasmOffset;
     if (offset === null) return;
+    // FIXME: there might be more than one elements here with the same offset!
     let elems = selector(offset);
     let rect0 = elems[0].getBoundingClientRect();
     let rect1 = elems[1].getBoundingClientRect();
@@ -113,21 +119,25 @@ const linkElements = (element) => {
     }
     let bridge = document.getElementById("bridge");
     if (rect0.y < 0 || rect0.bottom < 0) {
+      // FIXME: bring the other element into view, and then update the clipPath?
       bridge.style.display = "none";
     } else {
       bridge.style.display = "block";
       bridge.style.left = `${rect0.width}px`;
-      bridge.style.clipPath = `polygon(0 ${rect0.y}px, 100% ${rect1.y}px, 100% ${rect1.bottom}px, 0 ${rect0.bottom}px)`;
+      bridge.style.clipPath = `polygon(0 ${rect0.y - 8}px, 100% ${rect1.y - 8}px, 100% ${rect1.bottom + 8}px, 0 ${rect0.bottom + 8}px)`;
       bridge.style.backgroundColor = elems[0].style.backgroundColor;
     }
-    elems[0].classList.add("hovered");
-    elems[1].classList.add("hovered");
+    for (const elem of elems) {
+      elem.classList.add("hovered");
+      elem.style.outline = `8px solid ${rgbToCss(rgbForOffset(offset))}`;
+    }
   });
   element.addEventListener("mouseleave", (event) => {
     document.getElementById("bridge").style.display = "none";
-    eachElementWithSameWasmOff(event, (elem) =>
-      elem.classList.remove("hovered"),
-    );
+    eachElementWithSameWasmOff(event, (elem) => {
+      elem.classList.remove("hovered");
+      elem.style.outline = "";
+    });
   });
 };
 
@@ -156,6 +166,7 @@ for (const func of state.asm.functions) {
 
   const addCurrentBlock = (offset) => {
     currentBlock.setAttribute("data-wasm-offset", offset);
+
     if (offset !== null) {
       adjustColorForOffset(currentBlock, offset);
       linkElements(currentBlock);

From 8d6be49f08a3825adea68a9672453d066f43f037 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 08:39:47 -0700
Subject: [PATCH 07/22] Adjust bridge width to account for different scrollbar
 widths

---
 crates/explorer/src/index.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 3893b53fc2de..52f159b300ca 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -118,15 +118,11 @@ const linkElements = (element) => {
       [rect0, rect1] = [rect1, rect0];
     }
     let bridge = document.getElementById("bridge");
-    if (rect0.y < 0 || rect0.bottom < 0) {
-      // FIXME: bring the other element into view, and then update the clipPath?
-      bridge.style.display = "none";
-    } else {
-      bridge.style.display = "block";
-      bridge.style.left = `${rect0.width}px`;
-      bridge.style.clipPath = `polygon(0 ${rect0.y - 8}px, 100% ${rect1.y - 8}px, 100% ${rect1.bottom + 8}px, 0 ${rect0.bottom + 8}px)`;
-      bridge.style.backgroundColor = elems[0].style.backgroundColor;
-    }
+    bridge.style.display = "block";
+    bridge.style.left = `${rect0.width}px`;
+    bridge.style.width = `${rect1.left - rect0.width}px`;
+    bridge.style.clipPath = `polygon(0 ${rect0.y - 8}px, 100% ${rect1.y - 8}px, 100% ${rect1.bottom + 8}px, 0 ${rect0.bottom + 8}px)`;
+    bridge.style.backgroundColor = elems[0].style.backgroundColor;
     for (const elem of elems) {
       elem.classList.add("hovered");
       elem.style.outline = `8px solid ${rgbToCss(rgbForOffset(offset))}`;

From 2780e84e874c08240f853d30063c9960d16828f8 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 08:52:52 -0700
Subject: [PATCH 08/22] Use simpler math in rgbToLuma() to avoid
 multiplications too

---
 crates/explorer/src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 52f159b300ca..3af40307e9a4 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -15,10 +15,10 @@ const state = (window.STATE = new State(window.WAT, window.ASM));
 
 const rgbToLuma = (rgb) => {
   // Use the NTSC color space (https://en.wikipedia.org/wiki/YIQ) to determine
-  // the luminance of this color.  (This is scaled to a power of two so we can
-  // shift by 10 instead of dividing by 1000.)
+  // the luminance of this color.  (This is an approximation using powers of two,
+  // to avoid multiplications and divisions. It's good enough for our purposes.)
   let [r, g, b] = rgbToTriple(rgb);
-  return (r * 306 + g * 601 + b * 116) >> 10;
+  return (((r << 8) + (g << 9) + (b << 7)) >> 10) + (g & 31);
 };
 const rgbToTriple = (rgb) => [
   (rgb >> 16) & 0xff,

From be93ce6f65d12e144bf3ba6edc6309c5ce0259d6 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 08:56:25 -0700
Subject: [PATCH 09/22] Slight improvement to crc24 calculation

---
 crates/explorer/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 3af40307e9a4..088822482b2d 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -33,7 +33,7 @@ const rgbForOffset = (offset) => {
   const crc24 = (crc, byte) => {
     crc ^= byte << 16;
     for (let bit = 0; bit < 8; bit++) {
-      crc = (crc & 0x800000 ? (crc << 1) ^ 0xfa5711 : crc << 1) & 0xffffff;
+      crc = ((crc << 1) ^ (crc & 0x800000 ? 0xfa5711 : 0)) & 0xffffff;
     }
     return crc;
   };

From c78fbc9fc6aaec5e64628ad94f4882595e89df32 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 16:00:50 -0700
Subject: [PATCH 10/22] Draw multiple conections from WAT to ASM views

Sometimes the ASM block contains disjoint sets of instructions
that relate to one WASM instruction, so link all of them at the
same time.
---
 crates/explorer/src/index.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 088822482b2d..54852797b474 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -110,18 +110,35 @@ const linkElements = (element) => {
   element.addEventListener("mouseenter", (event) => {
     let offset = event.target.dataset.wasmOffset;
     if (offset === null) return;
-    // FIXME: there might be more than one elements here with the same offset!
-    let elems = selector(offset);
+    // Gather all elements related to the desired offset.  Put the one in the WAT
+    // view first, and then all the others subsequently; this is done so we can
+    // calculate the polygon to bridge the WAT and the ASM views.
+    //
+    // FIXME: optimize for the common case where selector() returns only two
+    // elements!
+    let elems = Array.from(selector(offset).entries()).map((elem) => {
+      let [_discard, node] = elem;
+      return node;
+    });
+    elems.sort((elem0, elem1) => {
+      let rect0 = elem0.getBoundingClientRect();
+      let rect1 = elem1.getBoundingClientRect();
+      return rect0.x - rect1.x;
+    });
     let rect0 = elems[0].getBoundingClientRect();
     let rect1 = elems[1].getBoundingClientRect();
-    if (rect0.x > rect1.x) {
-      [rect0, rect1] = [rect1, rect0];
-    }
+    let points = elems
+      .slice(1)
+      .map((elem) => {
+        let rect = elem.getBoundingClientRect();
+        return `0 ${rect0.y - 8}px, 100% ${rect.y - 8}px, 100% ${rect.bottom + 8}px, 0 ${rect0.bottom + 8}px`;
+      })
+      .join(",");
     let bridge = document.getElementById("bridge");
     bridge.style.display = "block";
     bridge.style.left = `${rect0.width}px`;
     bridge.style.width = `${rect1.left - rect0.width}px`;
-    bridge.style.clipPath = `polygon(0 ${rect0.y - 8}px, 100% ${rect1.y - 8}px, 100% ${rect1.bottom + 8}px, 0 ${rect0.bottom + 8}px)`;
+    bridge.style.clipPath = `polygon(${points})`;
     bridge.style.backgroundColor = elems[0].style.backgroundColor;
     for (const elem of elems) {
       elem.classList.add("hovered");

From 6a81603435b2d62d1be914fc5db01097632aa940 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 16:02:08 -0700
Subject: [PATCH 11/22] Show WASM offset on hover in the ASM view

---
 crates/explorer/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 54852797b474..6cb9d295e663 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -181,6 +181,7 @@ for (const func of state.asm.functions) {
     currentBlock.setAttribute("data-wasm-offset", offset);
 
     if (offset !== null) {
+      currentBlock.setAttribute("title", `Block at WASM offset: ${offset}`);
       adjustColorForOffset(currentBlock, offset);
       linkElements(currentBlock);
     }

From b938653247ae8a402a9fe89c405e9b0e19d99413 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 16:31:22 -0700
Subject: [PATCH 12/22] Fix grouping of ASM instructions

Some instructions with NULL wasm_offset were being group together
with the first instruction in the stream that had an offset.
---
 crates/explorer/src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 6cb9d295e663..cf03b57cd4a3 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -161,7 +161,6 @@ const createDivForCode = () => {
 };
 
 // Render the ASM.
-let lastOffset = null;
 for (const func of state.asm.functions) {
   const funcElem = document.createElement("div");
 
@@ -176,6 +175,7 @@ for (const func of state.asm.functions) {
 
   let currentBlock = createDivForCode();
   let disasmBuffer = [];
+  let lastOffset = null;
 
   const addCurrentBlock = (offset) => {
     currentBlock.setAttribute("data-wasm-offset", offset);
@@ -196,7 +196,7 @@ for (const func of state.asm.functions) {
       `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
     );
     if (lastOffset !== inst.wasm_offset) {
-      addCurrentBlock(inst.wasm_offset);
+      addCurrentBlock(lastOffset);
       currentBlock = createDivForCode();
       lastOffset = inst.wasm_offset;
     }

From 3a212eccfecc5252bec1b070d4e6f801336626a1 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Fri, 17 May 2024 23:52:00 -0700
Subject: [PATCH 13/22] Only set the title attribute to show WASM offset on
 hover

This saves quite a bit of memory!
---
 crates/explorer/src/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index cf03b57cd4a3..1d83e0fddbed 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -141,6 +141,8 @@ const linkElements = (element) => {
     bridge.style.clipPath = `polygon(${points})`;
     bridge.style.backgroundColor = elems[0].style.backgroundColor;
     for (const elem of elems) {
+      // TODO: if any of these elems is out of view, show in the pop-up there it is (up or down)
+      elem.setAttribute("title", `WASM offset @ ${offset}`);
       elem.classList.add("hovered");
       elem.style.outline = `8px solid ${rgbToCss(rgbForOffset(offset))}`;
     }
@@ -148,6 +150,7 @@ const linkElements = (element) => {
   element.addEventListener("mouseleave", (event) => {
     document.getElementById("bridge").style.display = "none";
     eachElementWithSameWasmOff(event, (elem) => {
+      elem.removeAttribute("title");
       elem.classList.remove("hovered");
       elem.style.outline = "";
     });
@@ -181,7 +184,6 @@ for (const func of state.asm.functions) {
     currentBlock.setAttribute("data-wasm-offset", offset);
 
     if (offset !== null) {
-      currentBlock.setAttribute("title", `Block at WASM offset: ${offset}`);
       adjustColorForOffset(currentBlock, offset);
       linkElements(currentBlock);
     }

From 401acdaa15ab202b89c46393eab0a350d3af4f61 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Sat, 18 May 2024 00:10:39 -0700
Subject: [PATCH 14/22] Fix grouping of instructions in ASM mode

---
 crates/explorer/src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 1d83e0fddbed..09818ed315fa 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -194,14 +194,14 @@ for (const func of state.asm.functions) {
   };
 
   for (const inst of func.instructions) {
-    disasmBuffer.push(
-      `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
-    );
     if (lastOffset !== inst.wasm_offset) {
       addCurrentBlock(lastOffset);
       currentBlock = createDivForCode();
       lastOffset = inst.wasm_offset;
     }
+    disasmBuffer.push(
+      `${renderAddress(inst.address)}    ${renderBytes(inst.bytes)}    ${renderInst(inst.mnemonic, inst.operands)}`,
+    );
   }
   addCurrentBlock(lastOffset);
 

From 0edd6175682839ee9a6a1f5d77cb5c2d89168b30 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Sat, 18 May 2024 08:40:26 -0700
Subject: [PATCH 15/22] Add note about the origin of the CRC-24 calculation

---
 crates/explorer/src/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 09818ed315fa..5442948b016d 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -31,6 +31,8 @@ const rgbForOffset = (offset) => {
   let color = offsetToRgb[offset];
   if (color !== undefined) return color;
   const crc24 = (crc, byte) => {
+    // CRC computation adapted from Wikipedia[1] (shift-register based division versions.)
+    // [1] https://en.m.wikipedia.org/wiki/Computation_of_cyclic_redundancy_checks
     crc ^= byte << 16;
     for (let bit = 0; bit < 8; bit++) {
       crc = ((crc << 1) ^ (crc & 0x800000 ? 0xfa5711 : 0)) & 0xffffff;

From 759a74555335d3edf2fbe44d8a7e86d42eaa77d9 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Sat, 18 May 2024 08:58:27 -0700
Subject: [PATCH 16/22] Tweak color generation (let some brighter colors pass
 the filter)

---
 crates/explorer/src/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 5442948b016d..dd2710a709cc 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -42,7 +42,8 @@ const rgbForOffset = (offset) => {
   let orig_offset = offset;
   for (color = offset; offset; offset >>= 8)
     color = crc24(color, offset & 0xff);
-  color = rgbToLuma(color) > 127 ? color ^ 0xa5a5a5 : color;
+  // Avoid colors that are too close to white.
+  color = rgbToLuma(color) > 200 ? color ^ 0xa5a5a5 : color;
   offsetToRgb[orig_offset] = color;
   return color;
 };

From 2e4c3d9b2bd9505193a4b6a829cd9339c20f0bc4 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Sat, 18 May 2024 08:59:01 -0700
Subject: [PATCH 17/22] Ensure we have enough elements to compute the bridge
 polygon

I don't know why this happens, but sometimes, a block of instructions
in the ASM side, that have a WASM offset in the generated JSON, won't
have an equivalent in the WAT side.  Guard against this.
---
 crates/explorer/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index dd2710a709cc..fc2c87e778dc 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -123,6 +123,7 @@ const linkElements = (element) => {
       let [_discard, node] = elem;
       return node;
     });
+    if (elems.length < 2) return;
     elems.sort((elem0, elem1) => {
       let rect0 = elem0.getBoundingClientRect();
       let rect1 = elem1.getBoundingClientRect();

From ea6cd9d59a74617340f750222e32942159f161bb Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Sat, 18 May 2024 09:36:05 -0700
Subject: [PATCH 18/22] Don't obscure the hovered line with the outline

---
 crates/explorer/src/index.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index fc2c87e778dc..11e241455153 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -48,6 +48,14 @@ const rgbForOffset = (offset) => {
   return color;
 };
 const rgbToCss = (rgb) => `rgba(${rgbToTriple(rgb).join(",")})`;
+const rgbDarken = (rgb) => {
+  let [r, g, b] = rgbToTriple(rgb);
+  return (
+    ((r - Math.min(r, 0x20)) << 16) |
+    ((g - Math.min(g, 0x20)) << 8) |
+    (b - Math.min(b, 0x20))
+  );
+};
 const adjustColorForOffset = (element, offset) => {
   let backgroundColor = rgbForOffset(offset);
   element.style.backgroundColor = rgbToCss(backgroundColor);
@@ -135,7 +143,7 @@ const linkElements = (element) => {
       .slice(1)
       .map((elem) => {
         let rect = elem.getBoundingClientRect();
-        return `0 ${rect0.y - 8}px, 100% ${rect.y - 8}px, 100% ${rect.bottom + 8}px, 0 ${rect0.bottom + 8}px`;
+        return `0 ${rect0.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${rect0.bottom + 2}px`;
       })
       .join(",");
     let bridge = document.getElementById("bridge");
@@ -144,11 +152,12 @@ const linkElements = (element) => {
     bridge.style.width = `${rect1.left - rect0.width}px`;
     bridge.style.clipPath = `polygon(${points})`;
     bridge.style.backgroundColor = elems[0].style.backgroundColor;
+    let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;
     for (const elem of elems) {
       // TODO: if any of these elems is out of view, show in the pop-up there it is (up or down)
       elem.setAttribute("title", `WASM offset @ ${offset}`);
       elem.classList.add("hovered");
-      elem.style.outline = `8px solid ${rgbToCss(rgbForOffset(offset))}`;
+      elem.style.outline = outline;
     }
   });
   element.addEventListener("mouseleave", (event) => {

From 3782a9bef8345f7812d9940a62f4384533bd3259 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Mon, 20 May 2024 09:12:09 -0700
Subject: [PATCH 19/22] Simplify bridge width calculation

---
 crates/explorer/src/index.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 11e241455153..d78b1ec44a1d 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -127,29 +127,26 @@ const linkElements = (element) => {
     //
     // FIXME: optimize for the common case where selector() returns only two
     // elements!
-    let elems = Array.from(selector(offset).entries()).map((elem) => {
-      let [_discard, node] = elem;
-      return node;
-    });
+    let elems = Array.from(selector(offset).entries()).map((elem) => elem[1]);
     if (elems.length < 2) return;
-    elems.sort((elem0, elem1) => {
-      let rect0 = elem0.getBoundingClientRect();
-      let rect1 = elem1.getBoundingClientRect();
-      return rect0.x - rect1.x;
-    });
+    elems.sort(
+      (elem0, elem1) =>
+        elem0.getBoundingClientRect().x - elem1.getBoundingClientRect().x,
+    );
+    let bridgeWidth = 16;
     let rect0 = elems[0].getBoundingClientRect();
-    let rect1 = elems[1].getBoundingClientRect();
     let points = elems
       .slice(1)
       .map((elem) => {
         let rect = elem.getBoundingClientRect();
+        bridgeWidth = rect.left - rect0.width;
         return `0 ${rect0.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${rect0.bottom + 2}px`;
       })
       .join(",");
     let bridge = document.getElementById("bridge");
     bridge.style.display = "block";
     bridge.style.left = `${rect0.width}px`;
-    bridge.style.width = `${rect1.left - rect0.width}px`;
+    bridge.style.width = `${bridgeWidth}px`;
     bridge.style.clipPath = `polygon(${points})`;
     bridge.style.backgroundColor = elems[0].style.backgroundColor;
     let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;

From 1de200e09751a7689ad50e6cd8eaaf38046cb890 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Mon, 20 May 2024 12:39:45 -0700
Subject: [PATCH 20/22] Optimize hovering of blocks when one 1 WAT element
 matches with 1 ASM element

---
 crates/explorer/src/index.js | 45 +++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index d78b1ec44a1d..9788f2ee6e05 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -124,31 +124,44 @@ const linkElements = (element) => {
     // Gather all elements related to the desired offset.  Put the one in the WAT
     // view first, and then all the others subsequently; this is done so we can
     // calculate the polygon to bridge the WAT and the ASM views.
-    //
-    // FIXME: optimize for the common case where selector() returns only two
-    // elements!
-    let elems = Array.from(selector(offset).entries()).map((elem) => elem[1]);
-    if (elems.length < 2) return;
-    elems.sort(
-      (elem0, elem1) =>
-        elem0.getBoundingClientRect().x - elem1.getBoundingClientRect().x,
-    );
+    let elems = selector(offset);
+    let wat_elem, asm_elems;
+    if (elems.length == 2) {
+      let rect0 = elems[0].getBoundingClientRect();
+      let rect1 = elems[1].getBoundingClientRect();
+      if (rect0.x < rect1.x) {
+        wat_elem = elems[0];
+        asm_elems = [elems[1]];
+      } else {
+        wat_elem = elems[1];
+        asm_elems = [elems[0]];
+      }
+    } else if (elems.length < 2) {
+      return;
+    } else {
+      elems = Array.from(selector(offset).entries()).map((elem) => elem[1]);
+      elems.sort(
+        (elem0, elem1) =>
+          elem0.getBoundingClientRect().x - elem1.getBoundingClientRect().x,
+      );
+      wat_elem = elems[0];
+      asm_elems = elems.slice(1);
+    }
     let bridgeWidth = 16;
-    let rect0 = elems[0].getBoundingClientRect();
-    let points = elems
-      .slice(1)
+    let wat_rect = wat_elem.getBoundingClientRect();
+    let points = asm_elems
       .map((elem) => {
         let rect = elem.getBoundingClientRect();
-        bridgeWidth = rect.left - rect0.width;
-        return `0 ${rect0.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${rect0.bottom + 2}px`;
+        bridgeWidth = rect.left - wat_rect.width;
+        return `0 ${wat_rect.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${wat_rect.bottom + 2}px`;
       })
       .join(",");
     let bridge = document.getElementById("bridge");
     bridge.style.display = "block";
-    bridge.style.left = `${rect0.width}px`;
+    bridge.style.left = `${wat_rect.width}px`;
     bridge.style.width = `${bridgeWidth}px`;
     bridge.style.clipPath = `polygon(${points})`;
-    bridge.style.backgroundColor = elems[0].style.backgroundColor;
+    bridge.style.backgroundColor = wat_elem.style.backgroundColor;
     let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;
     for (const elem of elems) {
       // TODO: if any of these elems is out of view, show in the pop-up there it is (up or down)

From d0f6635ff2b6b3c681841c25d74c26c55a5452f6 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Thu, 30 May 2024 10:28:57 -0700
Subject: [PATCH 21/22] Address review comments

---
 crates/explorer/src/index.js | 231 +++++++++++++++++++++++------------
 1 file changed, 152 insertions(+), 79 deletions(-)

diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 9788f2ee6e05..34fe148f0141 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -1,35 +1,51 @@
-/* global window, document */
+/*** LRU Cache *****************************************************************/
 
-/*** State *********************************************************************/
+class Cache {
+  constructor(size, getFunc) {
+    // Maps preserve the insertion order, so we can use it to implement a naïve LRU
+    // cache.
+    this.cache = new Map();
+    this.cacheSize = size;
+    this.getFunc = getFunc;
+  }
 
-class State {
-  constructor(wat, asm) {
-    this.wat = wat;
-    this.asm = asm;
+  get(key) {
+    let v = this.cache.get(key);
+    if (v !== undefined) {
+      // Remove the found element from the cache so it can be inserted it again
+      // at the end before returning.
+      this.cache.delete(key);
+    } else {
+      v = this.getFunc(key);
+      if (this.cache.size > this.cache.cacheSize) {
+        // Evict the oldest item from the cache.
+        this.cache.delete(this.cache.keys().next().value);
+      }
+    }
+    this.cache.set(key, v);
+    return v;
   }
 }
 
-const state = (window.STATE = new State(window.WAT, window.ASM));
-
 /*** Colors for Offsets **********************************************************/
 
-const rgbToLuma = (rgb) => {
+const rgbToLuma = rgb => {
   // Use the NTSC color space (https://en.wikipedia.org/wiki/YIQ) to determine
-  // the luminance of this color.  (This is an approximation using powers of two,
-  // to avoid multiplications and divisions. It's good enough for our purposes.)
+  // the luminance (Y) of this color.  (This is an approximation using powers of two,
+  // to avoid multiplications and divisions. It's not accurate, but it's good enough
+  // for our purposes.)
   let [r, g, b] = rgbToTriple(rgb);
   return (((r << 8) + (g << 9) + (b << 7)) >> 10) + (g & 31);
 };
-const rgbToTriple = (rgb) => [
-  (rgb >> 16) & 0xff,
-  (rgb >> 8) & 0xff,
-  rgb & 0xff,
-];
-// Get the RGB color for the given offset.  (Memoize to avoid recalculating.)
-const offsetToRgb = new Map();
-const rgbForOffset = (offset) => {
-  let color = offsetToRgb[offset];
-  if (color !== undefined) return color;
+
+// Convert a color as a 24-bit number into a list with 3 elements: R, G, and B,
+// each ranging [0, 255].
+const rgbToTriple = rgb => [(rgb >> 16) & 0xff, (rgb >> 8) & 0xff, rgb & 0xff];
+
+// Use CRC24 as a way to calculate a color for a given Wasm offset. This
+// particular algorithm has been chosen because it produces bright, vibrant
+// colors, that don't repeat often, and is easily implementable.
+const calculateRgbForOffset = offset => {
   const crc24 = (crc, byte) => {
     // CRC computation adapted from Wikipedia[1] (shift-register based division versions.)
     // [1] https://en.m.wikipedia.org/wiki/Computation_of_cyclic_redundancy_checks
@@ -39,16 +55,40 @@ const rgbForOffset = (offset) => {
     }
     return crc;
   };
-  let orig_offset = offset;
-  for (color = offset; offset; offset >>= 8)
+
+  // Feed the offset into the CRC24 algorithm, one byte at a time.
+  let color = offset;
+  while (offset) {
     color = crc24(color, offset & 0xff);
-  // Avoid colors that are too close to white.
-  color = rgbToLuma(color) > 200 ? color ^ 0xa5a5a5 : color;
-  offsetToRgb[orig_offset] = color;
-  return color;
+    offset >>= 8;
+  }
+
+  // Avoid colors that are too close to white.  Flip some bits around
+  // so that the color components are more pronounced.
+  return rgbToLuma(color) > 200 ? color ^ 0xa5a5a5 : color;
 };
-const rgbToCss = (rgb) => `rgba(${rgbToTriple(rgb).join(",")})`;
-const rgbDarken = (rgb) => {
+
+// Memoize all colors for a given Wasm offset. Cache isn't used here since,
+// when rendering the Wat side, we use the fact that if a color has not been
+// assigned during the rendering of the Native Asm side, that block of Wasm
+// instructions isn't colored.
+let offsetToRgb = new Map();
+const rgbForOffset = offset => {
+  let rgb = offsetToRgb.get(offset);
+  if (rgb === undefined) {
+    rgb = calculateRgbForOffset(offset);
+    offsetToRgb.set(offset, rgb);
+  }
+  return rgb;
+};
+
+// Convert a color in a 24-bit number to a string suitable for CSS styling.
+const rgbToCss = rgb => `rgba(${rgbToTriple(rgb).join(",")})`;
+
+// Darkens a color in a 24-bit number slightly by subtracting at most 0x20
+// from each color component; e.g. RGB(175, 161, 10) becomes RGB(143, 129, 0).
+// This loses some color information, but it's good enough for our use case here.
+const rgbDarken = rgb => {
   let [r, g, b] = rgbToTriple(rgb);
   return (
     ((r - Math.min(r, 0x20)) << 16) |
@@ -56,6 +96,8 @@ const rgbDarken = (rgb) => {
     (b - Math.min(b, 0x20))
   );
 };
+
+// Adjust the color styles of a DOM element for a given Wasm offset.
 const adjustColorForOffset = (element, offset) => {
   let backgroundColor = rgbForOffset(offset);
   element.style.backgroundColor = rgbToCss(backgroundColor);
@@ -70,12 +112,12 @@ const repeat = (s, n) => {
   return s.repeat(n >= 0 ? n : 0);
 };
 
-const renderAddress = (addr) => {
+const renderAddress = addr => {
   let hex = addr.toString(16);
   return repeat("0", 8 - hex.length) + hex;
 };
 
-const renderBytes = (bytes) => {
+const renderBytes = bytes => {
   let s = "";
   for (let i = 0; i < bytes.length; i++) {
     if (i != 0) {
@@ -95,20 +137,29 @@ const renderInst = (mnemonic, operands) => {
   }
 };
 
-const linkElements = (element) => {
-  const selector = (offset) =>
-    document.querySelectorAll(`[data-wasm-offset="${offset}"]`);
+// Connects callbacks to mouse hovering events so elements are properly highlighted when
+// hovered, and the bridging element is drawn between the instruction lists.
+const linkedElementCache = new Cache(256, offset =>
+  document.querySelectorAll(`[data-wasm-offset="${offset}"]`),
+);
+const linkElements = element => {
   const eachElementWithSameWasmOff = (event, closure) => {
     let offset = event.target.dataset.wasmOffset;
     if (offset !== null) {
-      for (const elem of selector(offset)) closure(elem);
+      // Run the loop inside an animation frame.  Since we're modifying the DOM,
+      // do so when the browser has some breathing room.
+      window.requestAnimationFrame(() => {
+        linkedElementCache.get(offset).forEach(closure);
+      });
     }
   };
+
   element.addEventListener(
     "click",
-    (event) => {
+    event => {
       document.getElementById("bridge").style.display = "none";
-      eachElementWithSameWasmOff(event, (elem) => {
+      eachElementWithSameWasmOff(event, elem => {
+        if (elem === event.target) return; // Only scroll into view the other elements.
         elem.scrollIntoView({
           behavior: "smooth",
           block: "center",
@@ -118,61 +169,83 @@ const linkElements = (element) => {
     },
     { passive: true },
   );
-  element.addEventListener("mouseenter", (event) => {
+
+  element.addEventListener("mouseenter", event => {
     let offset = event.target.dataset.wasmOffset;
     if (offset === null) return;
+
     // Gather all elements related to the desired offset.  Put the one in the WAT
     // view first, and then all the others subsequently; this is done so we can
     // calculate the polygon to bridge the WAT and the ASM views.
-    let elems = selector(offset);
-    let wat_elem, asm_elems;
+    let elems = linkedElementCache.get(offset);
+    if (elems.length < 2) return;
+
+    let watElem, asmElems;
     if (elems.length == 2) {
+      // The most common case: only two elements matching a given Wasm offset, so
+      // no need to convert the NodeListOf returned by selector() to an array like
+      // in the general case below so we can sort by the X position.
       let rect0 = elems[0].getBoundingClientRect();
       let rect1 = elems[1].getBoundingClientRect();
       if (rect0.x < rect1.x) {
-        wat_elem = elems[0];
-        asm_elems = [elems[1]];
+        watElem = elems[0];
+        asmElems = [elems[1]];
       } else {
-        wat_elem = elems[1];
-        asm_elems = [elems[0]];
+        watElem = elems[1];
+        asmElems = [elems[0]];
       }
-    } else if (elems.length < 2) {
-      return;
     } else {
-      elems = Array.from(selector(offset).entries()).map((elem) => elem[1]);
-      elems.sort(
+      elems = Array.from(elems).sort(
         (elem0, elem1) =>
           elem0.getBoundingClientRect().x - elem1.getBoundingClientRect().x,
       );
-      wat_elem = elems[0];
-      asm_elems = elems.slice(1);
+      watElem = elems[0];
+      asmElems = elems.slice(1);
     }
+
+    // Calculate all the points that form the polygon that's drawn between
+    // the Wasm code and the Native Asm code.  Start with a width of 16px,
+    // but recalculate it based on the position of the list elements as we
+    // iterate over them. One 4-point polygon will be constructed for each
+    // block of Native Asm code that correlates to one block of Wasm code.
     let bridgeWidth = 16;
-    let wat_rect = wat_elem.getBoundingClientRect();
-    let points = asm_elems
-      .map((elem) => {
+    let watRect = watElem.getBoundingClientRect();
+    let points = asmElems
+      .map(elem => {
         let rect = elem.getBoundingClientRect();
-        bridgeWidth = rect.left - wat_rect.width;
-        return `0 ${wat_rect.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${wat_rect.bottom + 2}px`;
+        bridgeWidth = rect.left - watRect.width;
+        return `0 ${watRect.y - 2}px, 100% ${rect.y - 2}px, 100% ${rect.bottom + 2}px, 0 ${watRect.bottom + 2}px`;
       })
       .join(",");
-    let bridge = document.getElementById("bridge");
-    bridge.style.display = "block";
-    bridge.style.left = `${wat_rect.width}px`;
-    bridge.style.width = `${bridgeWidth}px`;
-    bridge.style.clipPath = `polygon(${points})`;
-    bridge.style.backgroundColor = wat_elem.style.backgroundColor;
-    let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;
-    for (const elem of elems) {
-      // TODO: if any of these elems is out of view, show in the pop-up there it is (up or down)
-      elem.setAttribute("title", `WASM offset @ ${offset}`);
-      elem.classList.add("hovered");
-      elem.style.outline = outline;
-    }
+
+    // Perform the DOM modification inside an animation frame to give the browser a bit of
+    // a breathing room.
+    window.requestAnimationFrame(() => {
+      // Change the bridging element styling: change the color to be consistent with
+      // the Wasm offset, and use the points calculated above to give it a shape that
+      // makes it look like it's bridging the left and right lists.
+      let bridge = document.getElementById("bridge");
+      bridge.style.display = "block";
+      bridge.style.left = `${watRect.width}px`;
+      bridge.style.width = `${bridgeWidth}px`;
+      bridge.style.clipPath = `polygon(${points})`;
+      bridge.style.backgroundColor = watElem.style.backgroundColor;
+
+      // Draw a 2px dark outline in each block of instructions so it stands out a bit better
+      // when hovered.
+      let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;
+      for (const elem of elems) {
+        // TODO: if any of these elems is out of view, show in the pop-up there it is (up or down)
+        elem.setAttribute("title", `WASM offset @ ${offset}`);
+        elem.classList.add("hovered");
+        elem.style.outline = outline;
+      }
+    });
   });
-  element.addEventListener("mouseleave", (event) => {
+
+  element.addEventListener("mouseleave", event => {
     document.getElementById("bridge").style.display = "none";
-    eachElementWithSameWasmOff(event, (elem) => {
+    eachElementWithSameWasmOff(event, elem => {
       elem.removeAttribute("title");
       elem.classList.remove("hovered");
       elem.style.outline = "";
@@ -187,23 +260,23 @@ const createDivForCode = () => {
 };
 
 // Render the ASM.
-for (const func of state.asm.functions) {
+for (const func of window.ASM.functions) {
   const funcElem = document.createElement("div");
 
   const funcHeader = document.createElement("h3");
-  let func_name =
+  let functionName =
     func.name === null ? `function[${func.func_index}]` : func.name;
-  let demangled_name =
-    func.demangled_name !== null ? func.demangled_name : func_name;
-  funcHeader.textContent = `Disassembly of function <${demangled_name}>:`;
-  funcHeader.title = `Function ${func.func_index}: ${func_name}`;
+  let demangledName =
+    func.demangled_name !== null ? func.demangled_name : functionName;
+  funcHeader.textContent = `Disassembly of function <${demangledName}>:`;
+  funcHeader.title = `Function ${func.func_index}: ${functionName}`;
   funcElem.appendChild(funcHeader);
 
   let currentBlock = createDivForCode();
   let disasmBuffer = [];
   let lastOffset = null;
 
-  const addCurrentBlock = (offset) => {
+  const addCurrentBlock = offset => {
     currentBlock.setAttribute("data-wasm-offset", offset);
 
     if (offset !== null) {
@@ -232,13 +305,13 @@ for (const func of state.asm.functions) {
 }
 
 // Render the WAT.
-for (const chunk of state.wat.chunks) {
+for (const chunk of window.WAT.chunks) {
   if (chunk.wasm_offset === null) continue;
   const block = createDivForCode();
   block.dataset.wasmOffset = chunk.wasm_offset;
   block.innerText = chunk.wat;
 
-  if (offsetToRgb[chunk.wasm_offset] !== undefined) {
+  if (offsetToRgb.get(chunk.wasm_offset) !== undefined) {
     adjustColorForOffset(block, chunk.wasm_offset);
     linkElements(block);
   }

From 0c9ee7c6cfca9ee76e667adbcc6dbd1af0e7c932 Mon Sep 17 00:00:00 2001
From: "L. Pereira" <l.pereira@fastly.com>
Date: Thu, 30 May 2024 15:24:18 -0700
Subject: [PATCH 22/22] Make eslint happy

Since this code runs in a browser, we need to tell eslint that
it's going to run in a browser enviroment so things like `window`
and `document` are defined.

Signed-off-by: L. Pereira <l.pereira@fastly.com>
---
 crates/explorer/eslint.config.js  | 11 ++++++++---
 crates/explorer/package-lock.json | 19 ++++++++++++++++---
 crates/explorer/package.json      |  1 +
 crates/explorer/src/index.js      |  4 ++--
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/crates/explorer/eslint.config.js b/crates/explorer/eslint.config.js
index 4ad3b0ddc083..001b79d223e4 100644
--- a/crates/explorer/eslint.config.js
+++ b/crates/explorer/eslint.config.js
@@ -1,12 +1,17 @@
-import js from "@eslint/js";
+import globals from "globals";
+import pluginJs from "@eslint/js";
 
 export default [
-  js.configs.recommended,
-
   {
+    files: ["**/*.js"],
+    languageOptions: {
+      sourceType: "module",
+      globals: globals.browser,
+    },
     rules: {
       "no-unused-vars": "error",
       "no-undef": "error",
     },
   },
+  pluginJs.configs.recommended,
 ];
diff --git a/crates/explorer/package-lock.json b/crates/explorer/package-lock.json
index fe6df36aaae6..c19d40b6392c 100644
--- a/crates/explorer/package-lock.json
+++ b/crates/explorer/package-lock.json
@@ -11,6 +11,7 @@
       "devDependencies": {
         "@eslint/js": "^9.3.0",
         "eslint": "^9.3.0",
+        "globals": "^15.3.0",
         "prettier": "3.2.5"
       }
     },
@@ -73,6 +74,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@eslint/js": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.3.0.tgz",
@@ -569,9 +582,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.3.0.tgz",
+      "integrity": "sha512-cCdyVjIUVTtX8ZsPkq1oCsOsLmGIswqnjZYMJJTGaNApj1yHtLSymKhwH51ttirREn75z3p4k051clwg7rvNKA==",
       "dev": true,
       "engines": {
         "node": ">=18"
diff --git a/crates/explorer/package.json b/crates/explorer/package.json
index 4b3ff9421bb6..bcba10216612 100644
--- a/crates/explorer/package.json
+++ b/crates/explorer/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@eslint/js": "^9.3.0",
     "eslint": "^9.3.0",
+    "globals": "^15.3.0",
     "prettier": "3.2.5"
   },
   "type": "module"
diff --git a/crates/explorer/src/index.js b/crates/explorer/src/index.js
index 34fe148f0141..dc98fc05805a 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -1,6 +1,6 @@
 /*** LRU Cache *****************************************************************/
 
-class Cache {
+class LruCache {
   constructor(size, getFunc) {
     // Maps preserve the insertion order, so we can use it to implement a naïve LRU
     // cache.
@@ -139,7 +139,7 @@ const renderInst = (mnemonic, operands) => {
 
 // Connects callbacks to mouse hovering events so elements are properly highlighted when
 // hovered, and the bridging element is drawn between the instruction lists.
-const linkedElementCache = new Cache(256, offset =>
+const linkedElementCache = new LruCache(256, offset =>
   document.querySelectorAll(`[data-wasm-offset="${offset}"]`),
 );
 const linkElements = element => {