Merge pull request #151 from FalkorDB/background-color-hange-on-hover

fix #150 staling the tables
FalkorDB · Apr 4, 2024 · f00c2ab · f00c2ab
2 parents cd818ba + 51b53cf
commit f00c2ab
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
@@ -1,11 +1,13 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function DataPanel({ node }: { node: Node }) {
+export default function DataPanel({node}: {node: Node}) {
+    const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
+
     return (
         <Table>
             <TableHeader>
-                <TableRow>
+                <TableRow className={rowClass}>
                     <TableHead>Field</TableHead>
                     <TableHead>Value</TableHead>
                 </TableRow>
@@ -14,7 +16,7 @@ export default function DataPanel({ node }: { node: Node }) {
                 {
                     Object.entries(node).filter((row) => Object.values(row)[0] !== "category" && Object.values(row)[0] !== "color").map((row, index) => (
                         // eslint-disable-next-line react/no-array-index-key
-                        <TableRow key={index}>
+                        <TableRow className={rowClass} key={index}>
                             {
                                 Object.values(row).map((cell, cellIndex) => {
 

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
@@ -198,7 +198,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
                 />
             </ResizablePanel>
             <ResizableHandle withHandle />
-            <ResizablePanel ref={dataPanel} maxSize={50} minSize={10} collapsible defaultSize={selectedNode ? 20 : 0} className="bg-gray-100 dark:bg-gray-800">
+            <ResizablePanel ref={dataPanel} maxSize={50} minSize={17} collapsible defaultSize={selectedNode ? 20 : 0} className="bg-gray-100 dark:bg-gray-800">
                 {selectedNode && <DataPanel node={selectedNode} />}
             </ResizablePanel>
         </ResizablePanelGroup>

diff --git a/app/graph/tableview.tsx b/app/graph/tableview.tsx
@@ -4,17 +4,19 @@ import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, Tabl
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { JSONTree } from "react-json-tree"
 import { transparent } from "tailwindcss/colors";
+import { useTheme } from "next-themes";
 import { Graph } from "./model";
 
 // eslint-disable-next-line import/prefer-default-export
 export function TableView({ graph }: { graph: Graph }) {
-
-
+    const { theme, systemTheme} = useTheme()
+    const dark = theme === "dark" || (theme === "system" && systemTheme === "dark")
+    const rowClass = !dark ? "hover:bg-gray-400" : undefined
     return (
         <Table>
             <TableCaption>A list of results</TableCaption>
             <TableHeader>
-                <TableRow>
+                <TableRow className={rowClass}>
                     {
                         graph.Columns.map((column, index) => (
                             // eslint-disable-next-line react/no-array-index-key
@@ -27,7 +29,7 @@ export function TableView({ graph }: { graph: Graph }) {
                 {
                     graph.Data.map((row, index) => (
                         // eslint-disable-next-line react/no-array-index-key
-                        <TableRow key={index}>
+                        <TableRow className={rowClass} key={index}>
                             {
                                 Object.values(row).map((cell, cellIndex) => {
                                     // eslint-disable-next-line no-useless-escape