Make it obvious which query in the table is currently active.

PiperOrigin-RevId: 515479028

Author: Solumin

pytype/tools/debugger/visualizer.html.jinja2

@@ -104,6 +104,10 @@
       background-color: lightsteelblue;
     }
 
+    tr.datarow.selected-row {
+      background-color: lightsteelblue;
+    }
+
     table, th, td {
       border: 1px solid;
       border-collapse: collapse;
@@ -147,7 +151,7 @@
             <th>Description</th> <!-- Query Description -->
           </tr>
           {%- for query in query_table %}
-          <tr class=datarow onclick="vis.setup_query({{loop.index0}})" onmouseover="vis.highlight_cfgnode({{query.start_node}})" onmouseout="vis.unhighlight_cfgnode({{query.start_node}})">
+          <tr id="query_row{{loop.index0}}" class=datarow onclick="select_query({{loop.index0}})" onmouseover="vis.highlight_cfgnode({{query.start_node}})" onmouseout="vis.unhighlight_cfgnode({{query.start_node}})">
             <td>{{query.solver_idx}}</td>
             <td>{{query.from_cache}}</td>
             <td>{{query.shortcircuited}}</td>

pytype/tools/debugger/visualizer.js

@@ -13,6 +13,19 @@
  * more complex than that.
  */
 
+/**
+ * Highlights the selected query table row and starts the query.
+ * @param {number} query_id the id of the query, corresponding to the row in the
+ * query table.
+*/
+function select_query(query_id) {
+  for (const elem of document.getElementsByClassName("datarow")) {
+    elem.classList.remove("selected-row");
+  }
+  document.getElementById("query_row"+query_id).classList.add("selected-row");
+  vis.setup_query(query_id);
+}
+
 /**
  * Visualizer handles manipulating the Cytoscape instance using the pytype
  * program data.