From 6fe57dc2710d29f5dc5bd87e63e959d1c5fc8f86 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] 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 5b2f9f6e9365..332cff8d4ecc 100644
--- a/crates/explorer/src/index.js
+++ b/crates/explorer/src/index.js
@@ -122,31 +122,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)