mid is cool

frontend/script.js

@@ -53,54 +53,55 @@ function renderModelView(data) {
 }
 
 function createAttentionThumbnail(data, layerIdx, headIdx) {
-  // Extract tokens and attention from the data object
   const tokens = data.tokens;
   const attention = data.attention;
-  
-  const width = 80;       
-  const tokenHeight = 15; 
-  const padding = 10; 
-  // Compute the thumbnail height dynamically based on the number of tokens.
+
+  const width = 80;
+  const tokenHeight = 15;
+  const padding = 10;
   const height = padding * 2 + tokens.length * tokenHeight;
   const maxLineWidth = 4;
   const maxOpacity = 0.8;
-  
-  // Compute the right-side x-coordinate numerically.
   const xRight = width - padding;
-  
+
   // Create a thumbnail container using D3.
   const thumbnail = d3.select(document.createElement("div"))
+    .classed("thumbnail", true)  // ✅ Ensure correct class
     .style("position", "relative")
     .style("height", height + "px")
     .style("width", width + "px")
     .style("border", "1px solid #ddd")
     .style("border-radius", "4px")
     .style("padding", "5px")
-    .style("background", "#fff");
-  
-  // Append an SVG container with fixed dimensions.
+    .style("background", "#fff")
+    .style("cursor", "pointer"); // Indicate clickability
+
+  // Append an SVG container
   const svg = thumbnail.append("svg")
     .attr("width", width)
-    .attr("height", height);
-  
-  // Add header text (e.g., "L4 H4") to show the layer and head number.
+    .attr("height", height)
+    .attr("viewBox", `0 0 ${width} ${height}`) // not sure 
+    .attr("preserveAspectRatio", "xMidYMid meet"); // not sure 
+
+  // Add header text for layer and head
   svg.append("text")
     .attr("x", width / 2)
     .attr("y", 15)
-    .attr("text-anchor", "middle")
+    .attr("text-anchor", "middle")  // not sure 
+    .attr("dominant-baseline", "middle")  // not sure 
     .attr("font-size", "10")
     .text(`L${layerIdx + 1} H${headIdx + 1}`);
-  
-  // Draw attention lines with per-row normalization.
+
+  // Draw attention lines
   attention[layerIdx][headIdx].forEach((sourceWeights, sourceIdx) => {
     const rowMax = Math.max(...sourceWeights) || 1;
     sourceWeights.forEach((weight, targetIdx) => {
       if (weight > 0.01 && sourceIdx !== targetIdx) {
         const normalizedWeight = weight / rowMax;
         svg.append("line")
-          .attr("x1", padding)
+          .attr("x1", padding + 10) 
           .attr("y1", padding + sourceIdx * tokenHeight - 5)
-          .attr("x2", xRight)
+          .attr("x2", xRight - 10) 
           .attr("y2", padding + targetIdx * tokenHeight - 5)
           .attr("stroke", "#800000") // Bordo red
           .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
@@ -109,15 +110,25 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
       }
     });
   });
-  
-  // Click handler remains unchanged, using the passed-in data object.
+
   thumbnail.on("click", function() {
+    console.log(`Clicked: Layer ${layerIdx + 1}, Head ${headIdx + 1}`);
+
+    // Remove background from all thumbnails
+    d3.selectAll(".thumbnail").style("background", "#fff");
+
+    // Set background for clicked thumbnail
+    d3.select(this).style("background", "#ddd");
+
+    // Update displayed head/layer numbers
     d3.select("#display_head .number-box").text(headIdx + 1);
     d3.select("#display_layer .number-box").text(layerIdx + 1);
+
+    // Display updated hover tokens
     displayHoverTokens(data, layerIdx, headIdx);
   });
-  
-  return thumbnail.node();
+
+  return thumbnail.node(); // Return raw DOM node for appending
 }
 
 // Function to display the tokens and attention values