From cdcd43af5b0b280172002f964f023555aa190211 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sun, 8 Sep 2024 20:53:44 +0200
Subject: [PATCH] Fix a lot of styling in tree view and binop explain view

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../ExplainViews/BinaryExpr/VectorVector.tsx  | 71 +++++++++----------
 .../src/pages/query/TreeNode.module.css       |  4 +-
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/query/ExplainViews/BinaryExpr/VectorVector.tsx b/web/ui/mantine-ui/src/pages/query/ExplainViews/BinaryExpr/VectorVector.tsx
index 1ba2d0eb56..1ba42310ef 100644
--- a/web/ui/mantine-ui/src/pages/query/ExplainViews/BinaryExpr/VectorVector.tsx
+++ b/web/ui/mantine-ui/src/pages/query/ExplainViews/BinaryExpr/VectorVector.tsx
@@ -14,7 +14,6 @@ import {
   Alert,
   Anchor,
   Box,
-  Button,
   Group,
   List,
   Switch,
@@ -393,7 +392,9 @@ const VectorVectorBinaryExprExplainView: FC<
             >
               Too many match groups to display, only showing{" "}
               {Object.keys(matchGroups).length} out of {numGroups} groups.
-              <Anchor onClick={() => setMaxGroups(undefined)}>
+              <br />
+              <br />
+              <Anchor fz="sm" onClick={() => setMaxGroups(undefined)}>
                 Show all groups
               </Anchor>
             </Alert>
@@ -423,20 +424,6 @@ const VectorVectorBinaryExprExplainView: FC<
                   error,
                 } = mg;
 
-                const noLHSMatches = lhs.length === 0;
-                const noRHSMatches = rhs.length === 0;
-
-                const groupColor = colorPool[mgIdx % colorPool.length];
-                const noMatchesColor = "#e0e0e0";
-                const lhsGroupColor = noLHSMatches
-                  ? noMatchesColor
-                  : groupColor;
-                const rhsGroupColor = noRHSMatches
-                  ? noMatchesColor
-                  : groupColor;
-                const resultGroupColor =
-                  noLHSMatches || noRHSMatches ? noMatchesColor : groupColor;
-
                 const matchGroupTitleRow = (color: string) => (
                   <Table.Tr ta="center">
                     <Table.Td
@@ -455,16 +442,22 @@ const VectorVectorBinaryExprExplainView: FC<
                   colorOffset?: number
                 ) => (
                   <Box
-                    style={{ borderRadius: 3, border: `2px solid ${color}` }}
+                    style={{
+                      borderRadius: 3,
+                      border: "2px solid",
+                      borderColor:
+                        series.length === 0
+                          ? "light-dark(var(--mantine-color-gray-4), var(--mantine-color-gray-7))"
+                          : color,
+                    }}
                   >
                     <Table fz="xs" withRowBorders={false} verticalSpacing={5}>
                       <Table.Tbody>
                         {series.length === 0 ? (
                           <Table.Tr>
                             <Table.Td
-                              bg="gray.0"
                               ta="center"
-                              c="gray.6"
+                              c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
                               py="md"
                               fw="bold"
                             >
@@ -510,22 +503,15 @@ const VectorVectorBinaryExprExplainView: FC<
                         )}
                         {seriesCount > series.length && (
                           <Table.Tr>
-                            <Table.Td
-                              bg="gray.0"
-                              ta="center"
-                              c="gray.6"
-                              py="md"
-                              fw="bold"
-                            >
+                            <Table.Td ta="center" py="md" fw="bold" c="gray.6">
                               {seriesCount - series.length} more series omitted
-                              –
-                              <Button
-                                size="sm"
-                                variant="link"
+                              &nbsp;&nbsp;–&nbsp;&nbsp;
+                              <Anchor
+                                size="xs"
                                 onClick={() => setMaxSeriesPerGroup(undefined)}
                               >
-                                show all
-                              </Button>
+                                Show all series
+                              </Anchor>
                             </Table.Td>
                           </Table.Tr>
                         )}
@@ -534,11 +520,16 @@ const VectorVectorBinaryExprExplainView: FC<
                   </Box>
                 );
 
-                const lhsTable = matchGroupTable(lhs, lhsCount, lhsGroupColor);
+                const noLHSMatches = lhs.length === 0;
+                const noRHSMatches = rhs.length === 0;
+
+                const groupColor = colorPool[mgIdx % colorPool.length];
+
+                const lhsTable = matchGroupTable(lhs, lhsCount, groupColor);
                 const rhsTable = matchGroupTable(
                   rhs,
                   rhsCount,
-                  rhsGroupColor,
+                  groupColor,
                   rhsColorOffset
                 );
 
@@ -546,7 +537,11 @@ const VectorVectorBinaryExprExplainView: FC<
                   <Box
                     style={{
                       borderRadius: 3,
-                      border: `2px solid ${resultGroupColor}`,
+                      border: `2px solid`,
+                      borderColor:
+                        noLHSMatches || noRHSMatches || error !== null
+                          ? "light-dark(var(--mantine-color-gray-4), var(--mantine-color-gray-7))"
+                          : groupColor,
                     }}
                   >
                     <Table fz="xs" withRowBorders={false} verticalSpacing={5}>
@@ -554,9 +549,8 @@ const VectorVectorBinaryExprExplainView: FC<
                         {noLHSMatches || noRHSMatches ? (
                           <Table.Tr>
                             <Table.Td
-                              bg="gray.0"
                               ta="center"
-                              c="gray.6"
+                              c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
                               py="md"
                               fw="bold"
                             >
@@ -566,9 +560,8 @@ const VectorVectorBinaryExprExplainView: FC<
                         ) : error !== null ? (
                           <Table.Tr>
                             <Table.Td
-                              bg="gray.0"
                               ta="center"
-                              c="gray.6"
+                              c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
                               py="md"
                               fw="bold"
                             >
diff --git a/web/ui/mantine-ui/src/pages/query/TreeNode.module.css b/web/ui/mantine-ui/src/pages/query/TreeNode.module.css
index da3b8436b4..80845d921f 100644
--- a/web/ui/mantine-ui/src/pages/query/TreeNode.module.css
+++ b/web/ui/mantine-ui/src/pages/query/TreeNode.module.css
@@ -10,8 +10,8 @@
 .nodeText.nodeTextSelected,
 .nodeText.nodeTextSelected:hover {
   background-color: light-dark(
-    var(--mantine-color-gray-3),
-    var(--mantine-color-dark-3)
+    var(--mantine-color-gray-4),
+    var(--mantine-color-gray-7)
   );
   border: 2px solid
     light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));