From bab2de680fdcbf9d2abb96ed281503170e9b9e51 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 13 Mar 2025 15:34:58 -0600
Subject: [PATCH] update css for grid

---
 .../(chat_experience)/metrics/[metricId]/page.tsx  |  5 +----
 .../ui/charts/TableChart/BusterTableChart.tsx      |  2 ++
 .../components/ui/charts/TableChart/TableChart.css |  8 ++++++++
 .../ui/table/AppDataGrid/AppDataGrid.tsx           | 14 +++++++++-----
 .../useSelectedFileAndLayout.ts                    |  4 +---
 5 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/ui/charts/TableChart/TableChart.css

diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
index e523e2acf..8d867195a 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
@@ -7,11 +7,8 @@ export default async function MetricPage(props: {
   searchParams: Promise<{ embed?: string }>;
 }) {
   const searchParams = await props.searchParams;
-
-  const { embed } = searchParams;
-
   const params = await props.params;
-
+  const { embed } = searchParams;
   const { metricId } = params;
 
   const embedView = embed === 'true';
diff --git a/web/src/components/ui/charts/TableChart/BusterTableChart.tsx b/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
index 0bf8be8d3..57aeac61a 100644
--- a/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
+++ b/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
@@ -10,6 +10,7 @@ import {
 import { useMemoizedFn } from '@/hooks';
 import { useChartWrapperContextSelector } from '../chartHooks/useChartWrapperProvider';
 import AppDataGrid from '@/components/ui/table/AppDataGrid/AppDataGrid';
+import './TableChart.css';
 
 export interface BusterTableChartProps extends BusterTableChartConfig, BusterChartPropsBase {}
 
@@ -80,6 +81,7 @@ const BusterTableChartBase: React.FC<
 
   return (
     <AppDataGrid
+      className={'buster-table-chart'}
       key={data.length}
       rows={data}
       initialWidth={containerWidth}
diff --git a/web/src/components/ui/charts/TableChart/TableChart.css b/web/src/components/ui/charts/TableChart/TableChart.css
new file mode 100644
index 000000000..846b188f1
--- /dev/null
+++ b/web/src/components/ui/charts/TableChart/TableChart.css
@@ -0,0 +1,8 @@
+.buster-table-chart {
+  .rdg-row:not(:has(+ .rdg-row)) {
+    @apply border-b-0;
+    .rdg-cell {
+      @apply border-b-0;
+    }
+  }
+}
diff --git a/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx b/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx
index b4e922b98..4900a4f94 100644
--- a/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx
+++ b/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx
@@ -36,6 +36,7 @@ import {
   defaultHeaderFormat,
   MIN_WIDTH
 } from './helpers';
+import { cn } from '@/lib/classMerge';
 
 type Row = Record<string, string | number | null | Date>;
 
@@ -46,6 +47,7 @@ const DEFAULT_COLUMN_WIDTH = {
 };
 
 export interface AppDataGridProps {
+  className?: string;
   initialWidth?: number;
   animate?: boolean;
   resizable?: boolean;
@@ -68,6 +70,7 @@ export interface AppDataGridProps {
 
 export const AppDataGrid: React.FC<AppDataGridProps> = React.memo(
   ({
+    className = '',
     resizable = true,
     draggable = true,
     sortable = true,
@@ -341,10 +344,11 @@ export const AppDataGrid: React.FC<AppDataGridProps> = React.memo(
         <ErrorBoundary onError={handleErrorBoundary}>
           <div
             ref={containerRef}
-            className={'bg-background flex h-full w-full flex-col'}
-            style={{
-              transition: animate ? 'opacity 0.25s' : undefined
-            }}>
+            className={cn(
+              'bg-background flex h-full w-full flex-col',
+              //   animate && 'animate-in fade-in',
+              className
+            )}>
             <DataGrid
               className={styles.dataGrid}
               columns={reorderedColumns}
@@ -393,7 +397,7 @@ const HeaderCell: React.FC<
       </Text>
       {sortable && sortDirection && (
         <div
-          className="text-icon-color text-xs transition"
+          className="text-icon-color text-2xs ml-1 transition"
           style={{
             transform: `rotate(${sortDirection === 'ASC' ? 0 : 180}deg)`
           }}>
diff --git a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
index 54dacda1b..01b18fa64 100644
--- a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
+++ b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
@@ -31,9 +31,7 @@ export const useSelectedFileAndLayout = ({
       return 'chat';
     }
 
-    if (selectedFile) return 'file';
-
-    return 'chat';
+    return 'file';
   }, [selectedFile]);
 
   const [renderViewLayoutKey, setRenderViewLayoutKey] = useState<ChatLayoutView>(