feat(app): add variant prop to table components for muted backgrounds (#1603)

.changeset/quiet-tables-dance.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Add `variant` prop to table components for muted background styling in dashboard tiles

packages/app/src/DBDashboardPage.tsx

@@ -369,6 +369,7 @@ const Tile = forwardRef(
                   title={title}
                   toolbarPrefix={[hoverToolbar]}
                   config={queriedConfig}
+                  variant="muted"
                   getRowSearchLink={row =>
                     buildTableRowSearchUrl({
                       row,
@@ -423,6 +424,7 @@ const Tile = forwardRef(
                   }}
                   isLive={false}
                   queryKeyPrefix={'search'}
+                  variant="muted"
                 />
               </ChartContainer>
             )}

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -22,6 +22,8 @@ import { UNDEFINED_WIDTH } from './tableUtils';
 import type { NumberFormat } from './types';
 import { formatNumber } from './utils';
 
+export type TableVariant = 'default' | 'muted';
+
 export const Table = ({
   data,
   groupColumnName,
@@ -30,6 +32,7 @@ export const Table = ({
   tableBottom,
   sorting,
   onSortingChange,
+  variant = 'default',
 }: {
   data: any[];
   columns: {
@@ -46,6 +49,7 @@ export const Table = ({
   tableBottom?: React.ReactNode;
   sorting: SortingState;
   onSortingChange: (sorting: SortingState) => void;
+  variant?: TableVariant;
 }) => {
   const MIN_COLUMN_WIDTH_PX = 100;
   //we need a reference to the scrolling element for logic down below
@@ -221,7 +225,10 @@ export const Table = ({
           style={{
             position: 'sticky',
             top: 0,
-            background: 'var(--color-bg-body)',
+            background:
+              variant === 'muted'
+                ? 'var(--color-bg-muted)'
+                : 'var(--color-bg-body)',
           }}
         >
           {table.getHeaderGroups().map(headerGroup => (

packages/app/src/components/DBRowTable.tsx

@@ -323,6 +323,7 @@ export const RawLogTable = memo(
     sortOrder,
     showExpandButton = true,
     getRowWhere,
+    variant = 'default',
   }: {
     wrapLines?: boolean;
     displayedColumns: string[];
@@ -363,6 +364,7 @@ export const RawLogTable = memo(
     sortOrder?: SortingState;
     onSortingChange?: (v: SortingState | null) => void;
     getRowWhere?: (row: Record<string, any>) => string;
+    variant?: DBRowTableVariant;
   }) => {
     const generateRowMatcher = generateRowId;
 
@@ -729,7 +731,9 @@ export const RawLogTable = memo(
     return (
       <div
         data-testid="search-results-table"
-        className="overflow-auto h-100 fs-8"
+        className={cx('overflow-auto h-100 fs-8', styles.tableWrapper, {
+          [styles.muted]: variant === 'muted',
+        })}
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
 
@@ -1168,6 +1172,8 @@ export function selectColumnMapWithoutAdditionalKeys(
   );
 }
 
+export type DBRowTableVariant = 'default' | 'muted';
+
 function DBSqlRowTableComponent({
   config,
   sourceId,
@@ -1186,6 +1192,7 @@ function DBSqlRowTableComponent({
   renderRowDetails,
   onSortingChange,
   initialSortBy,
+  variant = 'default',
 }: {
   config: ChartConfigWithDateRange;
   sourceId?: string;
@@ -1204,6 +1211,7 @@ function DBSqlRowTableComponent({
   showExpandButton?: boolean;
   initialSortBy?: SortingState;
   onSortingChange?: (v: SortingState | null) => void;
+  variant?: DBRowTableVariant;
 }) {
   const { data: me } = api.useMe();
 
@@ -1464,6 +1472,7 @@ function DBSqlRowTableComponent({
         onSortingChange={_onSortingChange}
         sortOrder={orderByArray}
         getRowWhere={getRowWhere}
+        variant={variant}
       />
     </>
   );

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -19,7 +19,7 @@ import DBRowSidePanel, {
   RowSidePanelContextProps,
 } from './DBRowSidePanel';
 import { BreadcrumbEntry } from './DBRowSidePanelHeader';
-import { DBSqlRowTable } from './DBRowTable';
+import { DBRowTableVariant, DBSqlRowTable } from './DBRowTable';
 
 interface Props {
   sourceId: string;
@@ -39,6 +39,7 @@ interface Props {
   breadcrumbPath?: BreadcrumbEntry[];
   onSortingChange?: (v: SortingState | null) => void;
   initialSortBy?: SortingState;
+  variant?: DBRowTableVariant;
 }
 
 export default function DBSqlRowTableWithSideBar({
@@ -57,6 +58,7 @@ export default function DBSqlRowTableWithSideBar({
   onSidebarOpen,
   onSortingChange,
   initialSortBy,
+  variant,
 }: Props) {
   const { data: sourceData } = useSource({ id: sourceId });
   const [rowId, setRowId] = useQueryState('rowWhere');
@@ -127,6 +129,7 @@ export default function DBSqlRowTableWithSideBar({
         onError={onError}
         onExpandedRowsChange={onExpandedRowsChange}
         collapseAllRows={collapseAllRows}
+        variant={variant}
       />
     </RowSidePanelContext.Provider>
   );

packages/app/src/components/DBTableChart.tsx

@@ -8,7 +8,7 @@ import {
   buildMVDateRangeIndicator,
   convertToTableChartConfig,
 } from '@/ChartUtils';
-import { Table } from '@/HDXMultiSeriesTableChart';
+import { Table, TableVariant } from '@/HDXMultiSeriesTableChart';
 import { useMVOptimizationExplanation } from '@/hooks/useMVOptimizationExplanation';
 import useOffsetPaginatedQuery from '@/hooks/useOffsetPaginatedQuery';
 import { useSource } from '@/source';
@@ -31,6 +31,7 @@ export default function DBTableChart({
   toolbarPrefix,
   toolbarSuffix,
   showMVOptimizationIndicator = true,
+  variant,
 }: {
   config: ChartConfigWithOptTimestamp;
   getRowSearchLink?: (row: any) => string | null;
@@ -43,6 +44,7 @@ export default function DBTableChart({
   toolbarPrefix?: React.ReactNode[];
   toolbarSuffix?: React.ReactNode[];
   showMVOptimizationIndicator?: boolean;
+  variant?: TableVariant;
 }) {
   const [sort, setSort] = useState<SortingState>([]);
 
@@ -217,6 +219,7 @@ export default function DBTableChart({
           getRowSearchLink={getRowSearchLink}
           sorting={effectiveSort}
           onSortingChange={handleSortingChange}
+          variant={variant}
           tableBottom={
             hasNextPage && (
               <Text ref={fetchMoreRef} ta="center">

packages/app/styles/LogTable.module.scss

@@ -1,14 +1,25 @@
 $button-height: 18px;
 
+.tableWrapper {
+  /* CSS custom properties for variant support */
+  --log-table-bg: var(--color-bg-body);
+  --log-table-muted-bg: var(--color-bg-muted);
+
+  &.muted {
+    --log-table-bg: var(--color-bg-muted);
+    --log-table-muted-bg: var(--color-bg-highlighted);
+  }
+}
+
 .table {
   table-layout: fixed;
   border-spacing: 0;
   border-collapse: separate;
-  background: var(--color-bg-body);
+  background: var(--log-table-bg);
 }
 
 .tableHead {
-  background: var(--color-bg-body);
+  background: var(--log-table-bg);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -19,7 +30,7 @@ $button-height: 18px;
   position: relative;
 
   &__selected {
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
     font-weight: bold;
   }
 
@@ -28,7 +39,7 @@ $button-height: 18px;
   }
 
   &:hover .rowContentButton {
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
   }
 
   &:has(.expandButton:hover) .rowButtons {
@@ -43,7 +54,7 @@ $button-height: 18px;
 .expandedRowContent {
   max-height: 400px;
   overflow: auto;
-  background-color: var(--color-bg-muted);
+  background-color: var(--log-table-muted-bg);
 }
 
 .expandButton {
@@ -60,19 +71,19 @@ $button-height: 18px;
   min-height: $button-height;
 
   &:hover {
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
   }
 
   &:focus,
   &:focus-visible {
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
     outline: none;
   }
 
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
   }
 
   svg {
@@ -117,14 +128,14 @@ $button-height: 18px;
 
   &:focus,
   &:focus-visible {
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
     outline: none;
   }
 
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--color-bg-muted);
+    background-color: var(--log-table-muted-bg);
   }
 
   &.isWrapped {