Expand click area to focus MultiDimTable detail pane and add hover styles for interactive details.

PiperOrigin-RevId: 892617887
Change-Id: I44c97a4209f07946d9f622676860fb2bec229000

Author: Koladata Team

py/koladata/ext/vis.py

@@ -836,6 +836,20 @@ def visualize_slice(
         border: 1px solid var(--emphasized-border-color, gray);
       }
 
+      .attr:hover,
+      .object-id:hover,
+      .limited:hover {
+        background-color: color-mix(in srgb, currentcolor, transparent 85%);
+        border-radius: 2px;
+      }
+
+      .truncated:hover {
+        background-color: color-mix(
+            in srgb,
+            var(--emphasized-background-color, whitesmoke),
+            currentcolor 10%);
+      }
+
       .attr:active,
       .object-id:active,
       .truncated:active,

ts/multi_dim_table.ts

@@ -460,11 +460,11 @@ export class MultiDimTable
     dimNav.scrollLeft = existingScrollLeft;
 
     dataRegionParts.detailPane.addEventListener('click', (e: MouseEvent) => {
-      const {target} = e;
-      if (target instanceof HTMLSlotElement) {
+      const slot = e.composedPath().find(el => el instanceof HTMLSlotElement);
+      if (slot) {
         // Handle a click to scroll to a cell based on the detail pane.
-        const row = Number(target.dataset['row']);
-        const col = Number(target.dataset['col']);
+        const row = Number(slot.dataset['row']);
+        const col = Number(slot.dataset['col']);
         this.focusDataCell(row, col);
         this.suppressLoadRequests = 1;
         this.scrollToIndex(col + this.loadedRange[0]);

ts/multi_dim_table_style.ts

@@ -150,10 +150,6 @@ export function shadow() {
         position: relative;
       }
 
-      slot::slotted(*) {
-        cursor: default;
-      }
-
       /* No pointer when there is only one element. */
       slot:first-child:last-child {
         cursor: default;