Persist table column sizes (#45)

Author: JeyRathnam

.changeset/three-doors-tell.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+enhancement - Persist log table column sizes to local storage

packages/app/src/LogTable.tsx

@@ -1,7 +1,9 @@
 import {
   ColumnDef,
+  ColumnResizeMode,
   flexRender,
   getCoreRowModel,
+  TableOptions,
   Row as TableRow,
   useReactTable,
 } from '@tanstack/react-table';
@@ -20,7 +22,7 @@ import FieldMultiSelect from './FieldMultiSelect';
 import InstallInstructionsModal from './InstallInstructionsModal';
 import LogLevel from './LogLevel';
 import api from './api';
-import { usePrevious, useWindowSize } from './utils';
+import { useLocalStorage, usePrevious, useWindowSize } from './utils';
 import { useSearchEventStream } from './search';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -211,6 +213,7 @@ function LogTableSettingsModal({
 
 export const RawLogTable = memo(
   ({
+    tableId,
     displayedColumns,
     fetchNextPage,
     formatUTC,
@@ -252,6 +255,7 @@ export const RawLogTable = memo(
     onScroll: (scrollTop: number) => void;
     isLive: boolean;
     onShowPatternsClick?: () => void;
+    tableId?: string;
   }) => {
     const dedupLogs = useMemo(() => {
       const lIds = new Set();
@@ -267,6 +271,10 @@ export const RawLogTable = memo(
     const { width } = useWindowSize();
     const isSmallScreen = (width ?? 1000) < 900;
 
+    const [columnSizeStorage, setColumnSizeStorage] = useLocalStorage<
+      Record<string, number>
+    >(`${tableId}-column-sizes`, {});
+
     const tsFormat = 'MMM d HH:mm:ss.SSS';
     const tsShortFormat = 'HH:mm:ss';
     // https://github.com/TanStack/table/discussions/3192#discussioncomment-3873093
@@ -336,7 +344,7 @@ export const RawLogTable = memo(
               </span>
             );
           },
-          size: isSmallScreen ? 75 : 180,
+          size: columnSizeStorage.timestamp ?? (isSmallScreen ? 75 : 180),
         },
         {
           accessorKey: 'severity_text',
@@ -351,7 +359,7 @@ export const RawLogTable = memo(
               <LogLevel level={info.getValue<string>()} />
             </span>
           ),
-          size: isSmallScreen ? 50 : 100,
+          size: columnSizeStorage.severity_text ?? (isSmallScreen ? 50 : 100),
         },
         {
           accessorKey: '_service',
@@ -366,7 +374,7 @@ export const RawLogTable = memo(
               {info.getValue<string>()}
             </span>
           ),
-          size: isSmallScreen ? 70 : 100,
+          size: columnSizeStorage._service ?? (isSmallScreen ? 70 : 100),
         },
         ...(displayedColumns.map(column => ({
           accessorFn: curry(retrieveColumnValue)(column), // Columns can contain '.' and will not work with accessorKey
@@ -383,7 +391,7 @@ export const RawLogTable = memo(
               </span>
             );
           },
-          size: 150,
+          size: columnSizeStorage[column] ?? 150,
         })) as ColumnDef<any>[]),
         {
           accessorKey: 'body',
@@ -416,6 +424,7 @@ export const RawLogTable = memo(
         displayedColumns,
         onShowPatternsClick,
         isSmallScreen,
+        columnSizeStorage,
       ],
     );
 
@@ -441,14 +450,38 @@ export const RawLogTable = memo(
       fetchMoreOnBottomReached(tableContainerRef.current);
     }, [fetchMoreOnBottomReached]);
 
-    const table = useReactTable({
-      data: dedupLogs,
-      columns,
-      getCoreRowModel: getCoreRowModel(),
-      // debugTable: true,
-      enableColumnResizing: true,
-      columnResizeMode: 'onChange',
-    });
+    const reactTableProps = useMemo((): TableOptions<any> => {
+      //TODO: fix any
+      const onColumnSizingChange = (updaterOrValue: any) => {
+        const state =
+          updaterOrValue instanceof Function
+            ? updaterOrValue()
+            : updaterOrValue;
+        setColumnSizeStorage({ ...columnSizeStorage, ...state });
+      };
+
+      const initReactTableProps = {
+        data: dedupLogs,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        // debugTable: true,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange' as ColumnResizeMode,
+      };
+
+      const columnSizeProps = {
+        state: {
+          columnSizing: columnSizeStorage,
+        },
+        onColumnSizingChange: onColumnSizingChange,
+      };
+
+      return tableId
+        ? { ...initReactTableProps, ...columnSizeProps }
+        : initReactTableProps;
+    }, [columns, dedupLogs, tableId, columnSizeStorage, setColumnSizeStorage]);
+
+    const table = useReactTable(reactTableProps);
 
     const { rows } = table.getRowModel();
 
@@ -531,7 +564,7 @@ export const RawLogTable = memo(
 
     return (
       <div
-        className="overflow-auto h-100 fs-8 bg-inherit"
+        className="overflow-auto h-100 fs-8 bg-inherit py-2"
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
 
@@ -544,7 +577,11 @@ export const RawLogTable = memo(
         // Fixes flickering scroll bar: https://github.com/TanStack/virtual/issues/426#issuecomment-1403438040
         // style={{ overflowAnchor: 'none' }}
       >
-        <table className="w-100 bg-inherit" style={{ tableLayout: 'fixed' }}>
+        <table
+          className="w-100 bg-inherit"
+          id={tableId}
+          style={{ tableLayout: 'fixed' }}
+        >
           <thead
             className="bg-inherit"
             style={{
@@ -600,22 +637,38 @@ export const RawLogTable = memo(
                           <i className="bi bi-three-dots-vertical" />
                         </div>
                       )}
-                      {headerIndex === headerGroup.headers.length - 1 &&
-                      onSettingsClick != null ? (
+                      {headerIndex === headerGroup.headers.length - 1 && (
                         <div
-                          className="fs-8 text-muted-hover"
+                          className="d-flex align-items-center"
                           style={{
                             position: 'absolute',
                             right: 8,
                             top: 0,
                             bottom: 0,
                           }}
-                          role="button"
-                          onClick={() => onSettingsClick()}
                         >
-                          <i className="bi bi-gear-fill" />
+                          {tableId != null &&
+                            Object.keys(columnSizeStorage).length > 0 && (
+                              <div
+                                className="fs-8 text-muted-hover disabled"
+                                role="button"
+                                onClick={() => setColumnSizeStorage({})}
+                                title="Reset Column Widths"
+                              >
+                                <i className="bi bi-arrow-clockwise" />
+                              </div>
+                            )}
+                          {onSettingsClick != null && (
+                            <div
+                              className="fs-8 text-muted-hover ms-2"
+                              role="button"
+                              onClick={() => onSettingsClick()}
+                            >
+                              <i className="bi bi-gear-fill" />
+                            </div>
+                          )}
                         </div>
-                      ) : null}
+                      )}
                     </th>
                   );
                 })}
@@ -730,6 +783,7 @@ export default function LogTable({
   setIsUTC,
   onEnd,
   onShowPatternsClick,
+  tableId,
 }: {
   config: {
     where: string;
@@ -747,6 +801,7 @@ export default function LogTable({
   setIsUTC: (isUTC: boolean) => void;
   onEnd?: () => void;
   onShowPatternsClick?: () => void;
+  tableId?: string;
 }) {
   const [instructionsOpen, setInstructionsOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -833,6 +888,7 @@ export default function LogTable({
         }
       />
       <RawLogTable
+        tableId={tableId}
         isLive={isLive}
         wrapLines={wrapLines}
         displayedColumns={displayedColumns}

packages/app/src/SearchPage.tsx

@@ -349,6 +349,7 @@ const LogViewerContainer = memo(function LogViewerContainer({
         />
       </ErrorBoundary>
       <LogTable
+        tableId="search-table"
         isLive={isLive}
         setIsUTC={setIsUTC}
         onScroll={useCallback(