From 5796ebf2227eb597324e5d0f9cd09607f719dd21 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Sat, 5 Apr 2025 18:59:53 -0600
Subject: [PATCH] make a few refernces more stable

---
 .../[datasetId]/overview/OverviewData.tsx     |   8 +-
 .../AppVerticalCodeSplitter/DataContainer.tsx |   2 +-
 .../ui/charts/TableChart/BusterTableChart.tsx |   1 +
 .../TanStackDataGrid/DataGridHeader.tsx       | 157 +++++++++---------
 .../TanStackDataGrid.stories.tsx              |  16 ++
 5 files changed, 106 insertions(+), 78 deletions(-)

diff --git a/web/src/app/app/(primary_layout)/datasets/[datasetId]/overview/OverviewData.tsx b/web/src/app/app/(primary_layout)/datasets/[datasetId]/overview/OverviewData.tsx
index 28937fb3f..d585c6e0c 100644
--- a/web/src/app/app/(primary_layout)/datasets/[datasetId]/overview/OverviewData.tsx
+++ b/web/src/app/app/(primary_layout)/datasets/[datasetId]/overview/OverviewData.tsx
@@ -25,10 +25,8 @@ export const OverviewData: React.FC<{
       ) : !isEmpty(data) ? (
         <AppDataGrid
           rows={data || []}
-          headerFormat={isAdmin ? (v) => String(v) : undefined}
+          headerFormat={isAdmin ? stableHeaderFormat : undefined}
           cellFormat={defaultCellFormatter}
-          resizable={true}
-          sortable={false}
         />
       ) : (
         <EmptyState />
@@ -54,3 +52,7 @@ const LoadingState: React.FC<{}> = () => {
     </div>
   );
 };
+
+const stableHeaderFormat = (value: string | number | Date | null, key: string): string => {
+  return String(value);
+};
diff --git a/web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx b/web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx
index 15a2ca978..5160d56cd 100644
--- a/web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx
+++ b/web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx
@@ -26,7 +26,7 @@ export const DataContainer: React.FC<{
       />
 
       {hasData ? (
-        <AppDataGrid rows={data} resizable={true} sortable={false} />
+        <AppDataGrid rows={data} />
       ) : (
         <div className="flex h-full items-center justify-center">
           {fetchingData ? 'Loading data...' : 'No data returned'}
diff --git a/web/src/components/ui/charts/TableChart/BusterTableChart.tsx b/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
index 9874052bd..1d8348d08 100644
--- a/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
+++ b/web/src/components/ui/charts/TableChart/BusterTableChart.tsx
@@ -85,6 +85,7 @@ const BusterTableChartBase: React.FC<
       columnWidths={tableColumnWidths || undefined}
       sortable={!readOnly}
       resizable={!readOnly}
+      draggable={!readOnly}
       onReady={onReady}
       headerFormat={onFormatHeader}
       cellFormat={onFormatCell}
diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
index 7147306bc..8d5a4d336 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { Header, Table } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import { cn } from '@/lib/classMerge';
@@ -16,86 +16,95 @@ interface DraggableHeaderProps {
   draggable: boolean;
 }
 
-const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
-  ({ header, sortable, resizable, isOverTarget, draggable }) => {
-    // Set up dnd-kit's useDraggable for this header cell
-    const {
-      attributes,
-      listeners,
-      isDragging,
-      setNodeRef: setDragNodeRef
-    } = useDraggable({
-      disabled: !draggable,
-      id: header.id
-    });
+const DraggableHeader: React.FC<DraggableHeaderProps> = ({
+  header,
+  sortable,
+  resizable,
+  isOverTarget,
+  draggable
+}) => {
+  // Set up dnd-kit's useDraggable for this header cell
+  const {
+    attributes,
+    listeners,
+    isDragging,
+    setNodeRef: setDragNodeRef
+  } = useDraggable({
+    disabled: !draggable,
+    id: header.id
+  });
 
-    // Set up droppable area to detect when a header is over this target
-    const { setNodeRef: setDropNodeRef } = useDroppable({
-      id: `droppable-${header.id}`
-    });
+  // Set up droppable area to detect when a header is over this target
+  const { setNodeRef: setDropNodeRef } = useDroppable({
+    id: `droppable-${header.id}`
+  });
 
-    const style: CSSProperties = {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: header.column.getSize(),
-      opacity: isDragging ? 0.65 : 1,
-      transition: 'none', // Prevent any transitions for snappy changes
-      height: `${HEADER_HEIGHT}px` // Set fixed header height
-    };
+  const style: CSSProperties = {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: header.column.getSize(),
+    opacity: isDragging ? 0.65 : 1,
+    transition: 'none', // Prevent any transitions for snappy changes
+    height: `${HEADER_HEIGHT}px` // Set fixed header height
+  };
 
-    return (
-      <th
-        ref={draggable ? setDropNodeRef : undefined}
-        style={style}
+  return (
+    <th
+      ref={draggable ? setDropNodeRef : undefined}
+      style={style}
+      className={cn(
+        'group bg-background relative border-r select-none last:border-r-0',
+        header.column.getIsResizing() ? 'bg-primary/10' : 'hover:bg-item-hover',
+        isOverTarget && 'bg-primary/10 border-primary inset border border-r! border-dashed'
+      )}
+      // onClick toggles sorting if enabled
+      onClick={header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined}>
+      <span
         className={cn(
-          'group bg-background relative border-r select-none last:border-r-0',
-          header.column.getIsResizing() ? 'bg-primary/10' : 'hover:bg-item-hover',
-          isOverTarget && 'bg-primary/10 border-primary inset border border-r! border-dashed'
+          'flex h-full flex-1 items-center space-x-1.5 p-2',
+          draggable && 'cursor-grab'
         )}
-        // onClick toggles sorting if enabled
-        onClick={header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined}>
-        <span
-          className={cn(
-            'flex h-full flex-1 items-center space-x-1.5 p-2',
-            draggable && 'cursor-grab'
-          )}
-          ref={draggable ? setDragNodeRef : undefined}
-          {...attributes}
-          {...listeners}>
-          <span className="text-gray-dark text-base font-normal">
-            {flexRender(header.column.columnDef.header, header.getContext())}
-          </span>
-          {header.column.getIsSorted() === 'asc' && (
-            <span className="text-icon-color text-xs">
-              <CaretUp />
-            </span>
-          )}
-          {header.column.getIsSorted() === 'desc' && (
-            <span className="text-icon-color text-xs">
-              <CaretDown />
-            </span>
-          )}
+        ref={draggable ? setDragNodeRef : undefined}
+        {...attributes}
+        {...listeners}>
+        <span className="text-gray-dark text-base font-normal">
+          {flexRender(header.column.columnDef.header, header.getContext())}
         </span>
-        {resizable && (
-          <span
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            }}>
-            <span
-              onMouseDown={header.getResizeHandler()}
-              onTouchStart={header.getResizeHandler()}
-              className={cn(
-                'group-hover:bg-border hover:bg-primary absolute inset-y-0 -right-0.5 z-10 w-1 cursor-col-resize transition-colors duration-100 select-none',
-                header.column.getIsResizing() && 'bg-primary'
-              )}
-            />
-          </span>
+
+        {sortable && (
+          <>
+            {header.column.getIsSorted() === 'asc' && (
+              <span className="text-icon-color text-xs">
+                <CaretUp />
+              </span>
+            )}
+            {header.column.getIsSorted() === 'desc' && (
+              <span className="text-icon-color text-xs">
+                <CaretDown />
+              </span>
+            )}
+          </>
         )}
-      </th>
-    );
-  }
-);
+      </span>
+      {resizable && (
+        <span
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}>
+          <span
+            onMouseDown={header.getResizeHandler()}
+            onTouchStart={header.getResizeHandler()}
+            className={cn(
+              'group-hover:bg-border hover:bg-primary absolute inset-y-0 -right-0.5 z-10 w-1 cursor-col-resize transition-colors duration-100 select-none',
+              header.column.getIsResizing() && 'bg-primary'
+            )}
+          />
+        </span>
+      )}
+    </th>
+  );
+};
 
 DraggableHeader.displayName = 'DraggableHeader';
 
diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
index d1004d43e..2e35924a0 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
@@ -71,6 +71,22 @@ export const NonDraggable: Story = {
   }
 };
 
+export const NonResizable: Story = {
+  args: {
+    ...meta.args,
+    rows: sampleData,
+    resizable: false
+  }
+};
+
+export const NonSortable: Story = {
+  args: {
+    ...meta.args,
+    rows: sampleData,
+    sortable: false
+  }
+};
+
 export const CustomColumnOrder: Story = {
   args: {
     ...meta.args,