Skip to content

Commit

Permalink
Add interaction for method call tables.
Browse files Browse the repository at this point in the history
  • Loading branch information
gavinleroy committed Feb 29, 2024
1 parent 81f3aff commit 41a256b
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 5 deletions.
22 changes: 22 additions & 0 deletions ide/packages/panoptes/src/File.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
37 changes: 32 additions & 5 deletions ide/packages/panoptes/src/File.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -189,18 +202,32 @@ 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>
))}
</tr>
));

return (
<table>
{headingRow}
{bodyRows}
</table>
<>
<table className="MethodCallTable" onMouseLeave={onTableMouseExit}>
{headingRow}
{bodyRows}
</table>
{hoveredObligation !== undefined ? (
<ObligationFromIdx idx={hoveredObligation} />
) : (
clickedObligation?.[1]
)}
</>
);
};

Expand Down

0 comments on commit 41a256b

Please sign in to comment.