fix(logs): Use fields array to support static column widths (#95432)

This was changed to a count in #94797 but that broke the static column
widths. So reverting it back to the array of fields.

LOGS-212

Author: Zylphrex

static/app/components/profiling/suspectFunctions/suspectFunctionsTable.tsx

@@ -114,7 +114,7 @@ export function SuspectFunctionsTable({
 
   const fields = COLUMNS.map(column => column.value);
   const tableRef = useRef<HTMLTableElement>(null);
-  const {initialTableStyles} = useTableStyles(fields.length, tableRef);
+  const {initialTableStyles} = useTableStyles(fields, tableRef);
 
   const baggage: RenderFunctionBaggage = {
     location,

static/app/views/explore/components/table.tsx

@@ -59,7 +59,7 @@ export const ALLOWED_CELL_ACTIONS: Actions[] = [
 const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;
 
 export function useTableStyles(
-  fieldsCount: number,
+  fields: string[],
   tableRef: React.RefObject<HTMLDivElement | null>,
   options?: {
     minimumColumnWidth?: number;
@@ -74,16 +74,16 @@ export function useTableStyles(
       : options?.prefixColumnWidth;
 
   const resizingColumnIndex = useRef<number | null>(null);
-  const columnWidthsRef = useRef<Array<number | null>>(new Array(fieldsCount).fill(null));
+  const columnWidthsRef = useRef<Array<number | null>>(fields.map(_ => null));
 
   useEffect(() => {
-    columnWidthsRef.current = new Array(fieldsCount)
-      .fill(null)
-      .map((_, index) => columnWidthsRef.current[index] ?? null);
-  }, [fieldsCount]);
+    columnWidthsRef.current = fields.map(
+      (_, index) => columnWidthsRef.current[index] ?? null
+    );
+  }, [fields]);
 
   const initialTableStyles = useMemo(() => {
-    const gridTemplateColumns = new Array(fieldsCount).fill(null).map(field => {
+    const gridTemplateColumns = fields.map(field => {
       const staticWidth = options?.staticColumnWidths?.[field];
       if (staticWidth) {
         return typeof staticWidth === 'number' ? `${staticWidth}px` : staticWidth;
@@ -96,7 +96,7 @@ export function useTableStyles(
     return {
       gridTemplateColumns: gridTemplateColumns.join(' '),
     };
-  }, [fieldsCount, minimumColumnWidth, prefixColumnWidth, options?.staticColumnWidths]);
+  }, [fields, minimumColumnWidth, prefixColumnWidth, options?.staticColumnWidths]);
 
   const onResizeMouseDown = useCallback(
     (event: React.MouseEvent<HTMLDivElement>, index: number) => {

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -96,17 +96,13 @@ export function LogsInfiniteTable({
   const [isFunctionScrolling, setIsFunctionScrolling] = useState(false);
 
   const sharedHoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const {initialTableStyles, onResizeMouseDown} = useTableStyles(
-    fields.length,
-    tableRef,
-    {
-      minimumColumnWidth: 50,
-      prefixColumnWidth: 'min-content',
-      staticColumnWidths: {
-        [OurLogKnownFieldKey.MESSAGE]: '1fr',
-      },
-    }
-  );
+  const {initialTableStyles, onResizeMouseDown} = useTableStyles(fields, tableRef, {
+    minimumColumnWidth: 50,
+    prefixColumnWidth: 'min-content',
+    staticColumnWidths: {
+      [OurLogKnownFieldKey.MESSAGE]: '1fr',
+    },
+  });
 
   const estimateSize = useCallback(
     (index: number) => {

static/app/views/explore/logs/tables/logsTable.tsx

@@ -64,17 +64,13 @@ export function LogsTable({
 
   const tableRef = useRef<HTMLTableElement>(null);
   const sharedHoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const {initialTableStyles, onResizeMouseDown} = useTableStyles(
-    fields.length,
-    tableRef,
-    {
-      minimumColumnWidth: 50,
-      prefixColumnWidth: 'min-content',
-      staticColumnWidths: {
-        [OurLogKnownFieldKey.MESSAGE]: '1fr',
-      },
-    }
-  );
+  const {initialTableStyles, onResizeMouseDown} = useTableStyles(fields, tableRef, {
+    minimumColumnWidth: 50,
+    prefixColumnWidth: 'min-content',
+    staticColumnWidths: {
+      [OurLogKnownFieldKey.MESSAGE]: '1fr',
+    },
+  });
 
   const isEmpty = !isPending && !isError && (data?.length ?? 0) === 0;
   const highlightTerms = useMemo(() => getLogBodySearchTerms(search), [search]);

static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx

@@ -99,7 +99,7 @@ function AggregatesTable({
   const {tags: stringTags} = useTraceItemTags('string');
 
   const tableRef = useRef<HTMLTableElement>(null);
-  const {initialTableStyles} = useTableStyles(fields.length, tableRef, {
+  const {initialTableStyles} = useTableStyles(fields, tableRef, {
     minimumColumnWidth: 50,
     prefixColumnWidth: 'min-content',
   });
@@ -235,7 +235,7 @@ function SpansTable({spansTableResult, query: queryParts, index}: SampleTablePro
   const {tags: stringTags} = useTraceItemTags('string');
 
   const tableRef = useRef<HTMLTableElement>(null);
-  const {initialTableStyles} = useTableStyles(visibleFields.length, tableRef, {
+  const {initialTableStyles} = useTableStyles(visibleFields, tableRef, {
     minimumColumnWidth: 50,
   });
 

static/app/views/explore/tables/aggregatesTable.tsx

@@ -80,7 +80,12 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) {
 
   const tableRef = useRef<HTMLTableElement>(null);
   const {initialTableStyles, onResizeMouseDown} = useTableStyles(
-    visibleAggregateFields.length,
+    visibleAggregateFields.map(aggregateField => {
+      if (isGroupBy(aggregateField)) {
+        return aggregateField.groupBy;
+      }
+      return aggregateField.yAxis;
+    }),
     tableRef,
     {
       minimumColumnWidth: 50,

static/app/views/explore/tables/spansTable.tsx

@@ -53,7 +53,7 @@ export function SpansTable({spansTableResult}: SpansTableProps) {
 
   const tableRef = useRef<HTMLTableElement>(null);
   const {initialTableStyles, onResizeMouseDown} = useTableStyles(
-    visibleFields.length,
+    visibleFields,
     tableRef,
     {minimumColumnWidth: 50}
   );