update css for grid

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';

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}

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;
+    }
+  }
+}

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)`
           }}>

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>(