Merge pull request #606 from amelioro/highlight-only-edge-cell-on-hover

touchup: highlight only edge cell on hover
amelioro · Dec 13, 2024 · c03ce3f · c03ce3f
2 parents 4df6f95 + 914b0c8
commit c03ce3f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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"