Small tweak to the parse/group highlighting.

Highlighting every parent group in a slightly different shade was just too hard
to interpret. I changed it to only show the innermost non-leaf node containing
the pointed-at character (in light blue) along with its immediate children (in
yellow).

Also removed the span IDs because we're not using them and we need to figure out
the story around uniqueness.

src/lib/RenderHtml.hs

@@ -106,27 +106,21 @@ treeToHtml source' tree =
 
 treeToHtml' :: T.Text -> SpanTree -> Html
 treeToHtml' source' tree = case tree of
-  Span (_, _, spanId) children ->
+  Span (_, _, _) children ->
     let body' = foldMap (treeToHtml' source') children in
-    createSpan (Just spanId) body' ! spanClass
-  LeafSpan (l, r, spanId) ->
+    H.span body' ! spanClass
+  LeafSpan (l, r, _) ->
     let spanText = sliceText l r source' in
-    -- Note: only leaves need the code-span class.
-    createSpan (Just spanId) (highlightSyntax spanText) ! spanLeaf
+    H.span (highlightSyntax spanText) ! spanLeaf
   Trivia (l, r) ->
     let spanText = sliceText l r source' in
-    createSpan Nothing (highlightSyntax spanText)
-  where createSpan :: Maybe SpanId -> Html -> Html
-        createSpan spanId body' = case spanId of
-          Nothing -> H.span body'
-          Just id' -> H.span body' ! spanIdAttribute id'
-        spanIdAttribute :: SpanId -> Attribute
-        spanIdAttribute spanId =
-          At.id (stringValue (show spanId))
-        spanLeaf :: Attribute
-        spanLeaf = At.class_ "code-span-leaf"
-        spanClass :: Attribute
-        spanClass = At.class_ "code-span"
+    highlightSyntax spanText
+  where
+    spanClass :: Attribute
+    spanClass = At.class_ "code-span"
+
+    spanLeaf :: Attribute
+    spanLeaf = At.class_ "code-span-leaf"
 
 srcCtxsToSpanInfos :: SourceBlock -> [SrcPosCtx] -> [SpanPayload]
 srcCtxsToSpanInfos block ctxs =

static/index.js

@@ -43,6 +43,41 @@ function lookup_address(cell, address) {
     return node
 }
 
+function renderHovertips() {
+    var spans = document.querySelectorAll(".code-span");
+    Array.from(spans).map((span) => attachHovertip(span));
+}
+
+function attachHovertip(node) {
+    node.addEventListener("mouseover", (event) => highlightNode(     event, node));
+    node.addEventListener("mouseout" , (event) => removeHighlighting(event, node));
+}
+
+function highlightNode(event, node) {
+    event.stopPropagation();
+    node.style.backgroundColor = "lightblue";
+    Array.from(node.children).map(function (child) {
+        if (isCodeSpanOrLeaf(child)) {
+            child.style.backgroundColor = "yellow";
+        }
+    })
+}
+
+function isCodeSpanOrLeaf(node) {
+  return node.classList.contains("code-span") || node.classList.contains("code-span-leaf")
+
+}
+
+function removeHighlighting(event, node) {
+    event.stopPropagation();
+    node.style.backgroundColor = null;
+    Array.from(node.children).map(function (child) {
+        if (isCodeSpanOrLeaf(child)) {
+          child.style.backgroundColor = null;
+        }
+    })
+}
+
 function renderLaTeX() {
     // Render LaTeX equations in prose blocks via KaTeX, if available.
     // Skip rendering if KaTeX is unavailable.
@@ -154,6 +189,7 @@ function render(renderMode) {
     if (renderMode == RENDER_MODE.STATIC) {
         // For static pages, simply call rendering functions once.
         renderLaTeX();
+        renderHovertips();
         updateNavigation();
     } else {
         // For dynamic pages (via `dex web`), listen to update events.
@@ -192,6 +228,7 @@ function render(renderMode) {
                 Object.assign(cells, new_cells);
             }
             renderLaTeX();
+            renderHovertips();
             updateNavigation();
         };
     }

static/style.css

@@ -103,13 +103,3 @@ code {
 .iso-sugar {
   color: #25BBA7;
 }
-
-/* Tooltips support */
-
-.code-span:hover {
-  background-color: rgb(200 200 240 / 0.4);
-}
-
-.code-span-leaf:hover {
-  background-color: rgb(255 255 0);
-}

tests/unit/SourceInfoSpec.hs

@@ -193,15 +193,15 @@ overlappingSpansTree =
 renderedHtml :: String
 renderedHtml =
   concat [
-    "<span id=\"0\" class=\"code-span\"><span>0</span>",
-    "<span id=\"1\" class=\"code-span\">",
-    "<span id=\"2\" class=\"code-span-leaf\">1</span>",
-    "<span>23</span>",
-    "<span id=\"3\" class=\"code-span-leaf\">4</span>",
+    "<span class=\"code-span\">0",
+    "<span class=\"code-span\">",
+    "<span class=\"code-span-leaf\">1</span>",
+    "23",
+    "<span class=\"code-span-leaf\">4</span>",
     "</span>",
-    "<span>56</span>",
-    "<span id=\"4\" class=\"code-span-leaf\">78</span>",
-    "<span>9</span>",
+    "56",
+    "<span class=\"code-span-leaf\">78</span>",
+    "9",
     "</span>"
   ]