Replace checkboxes with compact Chip toggles for waterfall visibility controls

Switches from three full Checkbox components to Mantine Chip pills, giving
a more compact, discoverable UI. Chips are visually prominent enough to be
noticed but take significantly less horizontal space than labeled checkboxes.

Co-authored-by: Mike Shi <mike@hyperdx.io>

Author: cursoragent

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -17,7 +17,7 @@ import {
   Anchor,
   Box,
   Center,
-  Checkbox,
+  Chip,
   Code,
   Divider,
   Group,
@@ -1022,28 +1022,35 @@ export function DBTraceWaterfallChartContainer({
               {errorCountString}
             </span>
           </Text>
-          <Checkbox
+          <Chip
             size="xs"
-            label="Show spans"
+            variant="outline"
             checked={showSpans}
             onChange={() => setShowSpans(!showSpans)}
-            data-testid="show-spans-checkbox"
-          />
+            data-testid="show-spans-chip"
+          >
+            Spans
+          </Chip>
           {logTableSource && (
-            <Checkbox
+            <Chip
               size="xs"
-              label="Show logs"
+              variant="outline"
               checked={showLogs}
               onChange={() => setShowLogs(!showLogs)}
-              data-testid="show-logs-checkbox"
-            />
+              data-testid="show-logs-chip"
+            >
+              Logs
+            </Chip>
           )}
-          <Checkbox
+          <Chip
             size="xs"
-            label="Show span events"
+            variant="outline"
             checked={showSpanEvents}
             onChange={() => setShowSpanEvents(!showSpanEvents)}
-          />
+            data-testid="show-span-events-chip"
+          >
+            Span events
+          </Chip>
         </Group>
         <span>
           <Anchor

packages/app/src/components/__tests__/DBTraceWaterfallChart.test.tsx

@@ -312,50 +312,50 @@ describe('DBTraceWaterfallChartContainer', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders Show spans and Show logs checkboxes when log source is present', async () => {
+  it('renders Spans and Logs chips when log source is present', async () => {
     setupQueryMocks({ traceData: mockTraceData, logData: mockLogData });
     renderComponent();
     await waitForLoading();
 
-    expect(screen.getByTestId('show-spans-checkbox')).toBeInTheDocument();
-    expect(screen.getByTestId('show-logs-checkbox')).toBeInTheDocument();
+    expect(screen.getByTestId('show-spans-chip')).toBeInTheDocument();
+    expect(screen.getByTestId('show-logs-chip')).toBeInTheDocument();
   });
 
-  it('does not render Show logs checkbox when no log source', async () => {
+  it('does not render Logs chip when no log source', async () => {
     setupQueryMocks({ traceData: mockTraceData });
     renderComponent(null);
     await waitForLoading();
 
-    expect(screen.getByTestId('show-spans-checkbox')).toBeInTheDocument();
-    expect(screen.queryByTestId('show-logs-checkbox')).not.toBeInTheDocument();
+    expect(screen.getByTestId('show-spans-chip')).toBeInTheDocument();
+    expect(screen.queryByTestId('show-logs-chip')).not.toBeInTheDocument();
   });
 
-  it('hides log rows when Show logs is unchecked', async () => {
+  it('hides log rows when Logs chip is toggled off', async () => {
     const user = userEvent.setup();
     setupQueryMocks({ traceData: mockTraceData, logData: mockLogData });
     renderComponent();
     await waitForLoading();
 
     expect(MockTimelineChart.latestProps.rows.length).toBe(2);
 
-    const showLogsCheckbox = screen.getByTestId('show-logs-checkbox');
-    await user.click(showLogsCheckbox);
+    const showLogsChip = screen.getByTestId('show-logs-chip');
+    await user.click(showLogsChip);
 
     await waitFor(() => {
       expect(MockTimelineChart.latestProps.rows.length).toBe(1);
     });
   });
 
-  it('hides span rows when Show spans is unchecked', async () => {
+  it('hides span rows when Spans chip is toggled off', async () => {
     const user = userEvent.setup();
     setupQueryMocks({ traceData: mockTraceData, logData: mockLogData });
     renderComponent();
     await waitForLoading();
 
     expect(MockTimelineChart.latestProps.rows.length).toBe(2);
 
-    const showSpansCheckbox = screen.getByTestId('show-spans-checkbox');
-    await user.click(showSpansCheckbox);
+    const showSpansChip = screen.getByTestId('show-spans-chip');
+    await user.click(showSpansChip);
 
     await waitFor(() => {
       expect(MockTimelineChart.latestProps.rows.length).toBe(1);