From 41a256b47773399aa3d9e44155383d1c69f2cbd8 Mon Sep 17 00:00:00 2001
From: Gavin Gray <gavinleroy6@gmail.com>
Date: Thu, 29 Feb 2024 18:47:28 +0100
Subject: [PATCH] Add interaction for method call tables.

---
 ide/packages/panoptes/src/File.css | 22 ++++++++++++++++++
 ide/packages/panoptes/src/File.tsx | 37 ++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/ide/packages/panoptes/src/File.css b/ide/packages/panoptes/src/File.css
index 5ca813d..0198454 100644
--- a/ide/packages/panoptes/src/File.css
+++ b/ide/packages/panoptes/src/File.css
@@ -38,4 +38,26 @@ span.ErrorCount {
     display: block;
     padding: 0 0.15em 0.15em 0.15em;
     margin-bottom: 1em;
+}
+
+.MethodCallTable {
+    border-spacing: 0.15em;
+}
+
+/* select TH elements of the MethodCallTable class */
+.MethodCallTable th {
+    text-align: left;
+}
+
+.MethodCallTable td {
+    vertical-align: middle;
+}
+
+.MethodCallTable td.active {
+    border: 2px solid var(--vscode-focusBorder);
+    border-radius: 3px;
+}
+
+.MethodCallTable td:hover {
+    box-shadow: 10px 10px 5px var(--vscode-dropdown-background);
 }
\ No newline at end of file
diff --git a/ide/packages/panoptes/src/File.tsx b/ide/packages/panoptes/src/File.tsx
index 492c93f..359287b 100644
--- a/ide/packages/panoptes/src/File.tsx
+++ b/ide/packages/panoptes/src/File.tsx
@@ -166,6 +166,19 @@ const MethodLookupTable = ({ lookup }: { lookup: MethodLookupIdx }) => {
   const lookupInfo = bodyInfo.getMethodLookup(lookup);
   const numCans = lookupInfo.candidates.data.length ?? 0;
 
+  const [hoveredObligation, setActiveObligation] = useState<
+    ObligationIdx | undefined
+  >(undefined);
+
+  const [clickedObligation, setClickedObligation] = useState<
+    [ObligationIdx, React.ReactElement] | null
+  >(null);
+
+  const onTDHover = (idx: ObligationIdx) => () => setActiveObligation(idx);
+  const onTableMouseExit = () => setActiveObligation(undefined);
+  const onClick = (idx: ObligationIdx) => () =>
+    setClickedObligation([idx, <ObligationFromIdx idx={idx} />]);
+
   const headingRow = (
     <tr>
       <th>Receiver Ty</th>
@@ -189,7 +202,14 @@ const MethodLookupTable = ({ lookup }: { lookup: MethodLookupIdx }) => {
         <PrintTy ty={step.recvrTy.ty} />
       </td>
       {_.map(step.traitPredicates, (queryIdx, idx) => (
-        <td key={idx}>
+        <td
+          key={idx}
+          className={classNames({
+            active: queryIdx === clickedObligation?.[0],
+          })}
+          onMouseEnter={onTDHover(queryIdx)}
+          onClick={onClick(queryIdx)}
+        >
           <ObligationResultFromIdx idx={queryIdx} />
         </td>
       ))}
@@ -197,10 +217,17 @@ const MethodLookupTable = ({ lookup }: { lookup: MethodLookupIdx }) => {
   ));
 
   return (
-    <table>
-      {headingRow}
-      {bodyRows}
-    </table>
+    <>
+      <table className="MethodCallTable" onMouseLeave={onTableMouseExit}>
+        {headingRow}
+        {bodyRows}
+      </table>
+      {hoveredObligation !== undefined ? (
+        <ObligationFromIdx idx={hoveredObligation} />
+      ) : (
+        clickedObligation?.[1]
+      )}
+    </>
   );
 };