feat: add text wrap to tables (#1029)

Closes HDX-1856

Added icon to left of CSV Download button for wrapping text in table

<img width="1414" height="258" alt="image" src="https://github.com/user-attachments/assets/f5028799-1b61-4021-9775-4611c10d800e" />

Author: knudtty

.changeset/stale-cups-exist.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: add text wrap to tables

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -1,6 +1,7 @@
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
-import { Flex, Text } from '@mantine/core';
+import cx from 'classnames';
+import { Flex, Text, UnstyledButton } from '@mantine/core';
 import {
   flexRender,
   getCoreRowModel,
@@ -158,6 +159,7 @@ export const Table = ({
         : [0, 0],
     [items, rowVirtualizer.options.scrollMargin, totalSize],
   );
+  const [wrapLinesEnabled, setWrapLinesEnabled] = useState(false);
 
   const { csvData } = useCsvExport(
     data,
@@ -245,6 +247,13 @@ export const Table = ({
                             )}
                           {headerIndex === headerGroup.headers.length - 1 && (
                             <div className="d-flex align-items-center">
+                              <UnstyledButton
+                                onClick={() =>
+                                  setWrapLinesEnabled(prev => !prev)
+                                }
+                              >
+                                <i className="bi bi-text-wrap" />
+                              </UnstyledButton>
                               <CsvExportButton
                                 data={csvData}
                                 filename="HyperDX_table_results"
@@ -283,7 +292,12 @@ export const Table = ({
                   return (
                     <td key={cell.id} title={`${cell.getValue()}`}>
                       {getRowSearchLink == null ? (
-                        <div className="align-top overflow-hidden py-1 pe-3">
+                        <div
+                          className={cx('align-top overflow-hidden py-1 pe-3', {
+                            'text-break': wrapLinesEnabled,
+                            'text-truncate': !wrapLinesEnabled,
+                          })}
+                        >
                           {flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext(),

packages/app/src/components/DBRowTable.tsx

@@ -27,7 +27,7 @@ import {
   SelectList,
 } from '@hyperdx/common-utils/dist/types';
 import { splitAndTrimWithBracket } from '@hyperdx/common-utils/dist/utils';
-import { Box, Code, Flex, Text } from '@mantine/core';
+import { Box, Code, Flex, Text, UnstyledButton } from '@mantine/core';
 import {
   FetchNextPageOptions,
   useQuery,
@@ -230,7 +230,7 @@ export const RawLogTable = memo(
     onScroll,
     onSettingsClick,
     onShowPatternsClick,
-    wrapLines,
+    wrapLines = false,
     columnNameMap,
     showServiceColumn = true,
     dedupRows,
@@ -527,6 +527,7 @@ export const RawLogTable = memo(
     // Scroll to log id if it's not in window yet
     const [scrolledToHighlightedLine, setScrolledToHighlightedLine] =
       useState(false);
+    const [wrapLinesEnabled, setWrapLinesEnabled] = useState(wrapLines);
 
     useEffect(() => {
       if (
@@ -688,6 +689,11 @@ export const RawLogTable = memo(
                                 <i className="bi bi-arrow-clockwise" />
                               </div>
                             )}
+                          <UnstyledButton
+                            onClick={() => setWrapLinesEnabled(prev => !prev)}
+                          >
+                            <i className="bi bi-text-wrap" />
+                          </UnstyledButton>
                           <CsvExportButton
                             data={csvData}
                             filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
@@ -742,8 +748,8 @@ export const RawLogTable = memo(
                       <td
                         key={cell.id}
                         className={cx('align-top overflow-hidden', {
-                          'text-break': wrapLines,
-                          'text-truncate': !wrapLines,
+                          'text-break': wrapLinesEnabled,
+                          'text-truncate': !wrapLinesEnabled,
                         })}
                       >
                         {flexRender(