From 914b0c8a8b4d5b9c16f581a64e272be93d114739 Mon Sep 17 00:00:00 2001
From: Joel Keyser <keyser.joel@gmail.com>
Date: Thu, 12 Dec 2024 14:34:17 -0600
Subject: [PATCH] touchup: highlight only edge cell on hover

previously highlighted the whole row, which wasn't super helpful.

also lightened the highlight color to contrast better with indicators.
---
 .../topic/components/CriteriaTable/CriteriaTable.tsx   |  7 ++++---
 src/web/topic/components/CriteriaTable/EdgeCell.tsx    | 10 ++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/web/topic/components/CriteriaTable/CriteriaTable.tsx b/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
index 379e11b9..62e103e3 100644
--- a/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
+++ b/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
@@ -286,12 +286,13 @@ export const CriteriaTable = () => {
         enableStickyHeader={true}
         // not very well documented in the library, but this drop zone takes up space for unknown reasons.
         positionToolbarDropZone="none"
-        muiTablePaperProps={{
-          className: "criteria-table-paper",
-        }}
         muiTableProps={{
           className: tableZoomClasses,
         }}
+        muiTablePaperProps={{
+          className: "criteria-table-paper",
+        }}
+        muiTableBodyRowProps={{ hover: false }}
         state={{
           // have to set columnOrder because otherwise new columns are appended to the end, instead of before the last cell in the case of Solution Totals when table is transposed
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- all columns should have an id or accessorKey set
diff --git a/src/web/topic/components/CriteriaTable/EdgeCell.tsx b/src/web/topic/components/CriteriaTable/EdgeCell.tsx
index 701de1e2..6cc30cab 100644
--- a/src/web/topic/components/CriteriaTable/EdgeCell.tsx
+++ b/src/web/topic/components/CriteriaTable/EdgeCell.tsx
@@ -2,12 +2,18 @@ import { openContextMenu } from "@/web/common/store/contextMenuActions";
 import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators";
 import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndicators";
 import { Edge } from "@/web/topic/utils/graph";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected, useIsGraphPartSelected } from "@/web/view/currentViewStore/store";
 
 export const EdgeCell = ({ edge }: { edge: Edge }) => {
+  const selected = useIsGraphPartSelected(edge.id);
+
   return (
     <div
-      className="flex h-full flex-col items-center justify-center"
+      className={
+        "flex h-full flex-col items-center justify-center" +
+        // bg-neutral-50 instead of bg-neutral-main because we specifically want to contrast with indicator backgrounds
+        ` hover:bg-neutral-50${selected ? " bg-neutral-50" : ""}`
+      }
       onClick={() => setSelected(edge.id)}
       onContextMenu={(event) => openContextMenu(event, { edge })}
       role="button"