feat(app): search across multiple sources, with one source as N=1

.changeset/multi-source-search.md

@@ -0,0 +1,15 @@
+---
+'@hyperdx/app': minor
+'@hyperdx/common-utils': minor
+---
+
+Search across multiple sources at once. The search page's source selector can
+now expand into a multi-select (up to 3 log/trace sources): results interleave
+into one timestamp-ordered timeline with a per-row source badge, normalized
+columns (Timestamp, Source, Service, Level, Message, and Duration when traces
+are included), a histogram stacked by source, and an add-column picker over the
+union of the selected sources' columns. Each source runs its own query
+pipeline — sources on different connections work, and a failing source shows a
+status chip instead of failing the whole search. Multi-source mode is
+Lucene-only and shareable via URL; saved searches and alerts remain
+single-source for now.

packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx

@@ -211,6 +211,9 @@ jest.mock('../components/ChartSQLPreview', () => ({
   SQLPreview: () => <div />,
 }));
 jest.mock('../components/DBSqlRowTableWithSidebar', () => () => <div />);
+// Multi-source components pull in DBRowSidePanel (and its deep import graph),
+// which this test isolates away just like DBSqlRowTableWithSidebar above.
+jest.mock('../components/SearchResultsTable', () => () => <div />);
 jest.mock('../components/PatternTable', () => () => <div />);
 jest.mock('../components/Search/DBSearchHeatmapChart', () => ({
   DBSearchHeatmapChart: () => <div />,

packages/app/src/components/DBRowTable.tsx

@@ -1419,7 +1419,7 @@ export function appendSelectWithAdditionalKeys(
   }
 }
 
-function getSelectLength(select: SelectList): number {
+export function getSelectLength(select: SelectList): number {
   if (typeof select === 'string') {
     return select.split(',').filter(s => s.trim().length > 0).length;
   } else {
@@ -1512,7 +1512,7 @@ export function useConfigWithAdditionalSelect(
  * (e.g. `SELECT *`). Exported for SearchResultsTable, which resolves the same
  * columns when rendering a single source's own SELECT.
  */
-function selectColumnMapWithoutAdditionalKeys(
+export function selectColumnMapWithoutAdditionalKeys(
   selectMeta: ColumnMetaType[] | undefined,
   additionalKeysLength: number | undefined,
 ): Map<
@@ -1547,7 +1547,7 @@ export type DBRowTableVariant = 'default' | 'muted';
  * implementation. Denoising is inherently single-source: it mines patterns
  * from one table's body column against that source's severity expression.
  */
-function useDenoisedRows({
+export function useDenoisedRows({
   config,
   sourceId,
   processedRows,
@@ -1653,7 +1653,7 @@ function useDenoisedRows({
 }
 
 /** The "Removed Noisy Event Patterns" summary shown above denoised results. */
-function DenoisedPatternsSummary({
+export function DenoisedPatternsSummary({
   noisyPatterns,
   hasNoisyPatterns,
 }: {

packages/app/src/components/DBSearchPageFilters/hooks.ts

@@ -254,6 +254,7 @@ export function useFetchFacets({
   filterState,
   showMoreFields,
   disableValues,
+  enabled = true,
 }: {
   chartConfig: BuilderChartConfigWithDateRange;
   sourceId: string | null;
@@ -262,6 +263,8 @@ export function useFetchFacets({
   filterState?: FilterState;
   showMoreFields?: boolean;
   disableValues?: boolean;
+  /** Disable all data fetching (e.g. an unused multi-source hook slot). */
+  enabled?: boolean;
 }) {
   const facetsQuery = useFacets({
     chartConfig,
@@ -270,7 +273,7 @@ export function useFetchFacets({
     dateRange,
     filterState,
     showMoreFields,
-    enabled: true,
+    enabled,
     disableValues,
   });
 

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -157,7 +157,9 @@ enum InlineTab {
   ColumnValues = 'columnValues',
 }
 
-function RowOverviewPanelWrapper({
+// Exported for MultiSourceRowTable, which renders the same expanded-row
+// overview but resolves the source per row instead of once per table.
+export function RowOverviewPanelWrapper({
   source,
   rowId,
   aliasWith,

packages/app/src/components/MultiSourceBadge.tsx

@@ -1,4 +1,15 @@
-import React from 'react';
+import { COLORS } from '@/utils';
+
+/**
+ * Stable color for the Nth selected source in a multi-source search. Indexed
+ * by position in the selection (not hashed) so the ≤MAX_SEARCH_SOURCES badges
+ * never collide; the same assignment is used by the results table badge, the
+ * histogram series, and the per-source status chips so a source reads as one
+ * color everywhere on the page.
+ */
+export function getMultiSourceColor(index: number): string {
+  return COLORS[index % COLORS.length];
+}
 
 /** Colored-dot source label used in the merged results table. */
 export function SourceBadge({ name, color }: { name: string; color?: string }) {

packages/app/src/components/MultiSourceColumnPicker.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useMemo } from 'react';
+import { Group, MultiSelect, Text } from '@mantine/core';
+
+import { MultiSourceColumnOption } from '@/hooks/useMultiSourceSearch';
+
+/**
+ * Multi-source replacement for the free-text SELECT editor: pick extra
+ * columns from the union of the selected sources' top-level columns. Columns
+ * missing from a source render as blank cells for that source's rows.
+ */
+export default function MultiSourceColumnPicker({
+  unionColumns,
+  totalSources,
+  value,
+  onChange,
+}: {
+  unionColumns: MultiSourceColumnOption[];
+  totalSources: number;
+  /** Currently selected extra column names. */
+  value: string[];
+  onChange: (columns: string[]) => void;
+}) {
+  const availabilityByName = useMemo(
+    () => new Map(unionColumns.map(c => [c.name, c.availableCount])),
+    [unionColumns],
+  );
+
+  const data = useMemo(
+    () =>
+      unionColumns.map(c => ({
+        value: c.name,
+        label: c.name,
+      })),
+    [unionColumns],
+  );
+
+  const renderOption = useCallback(
+    ({ option }: { option: { value: string; label: string } }) => {
+      const available = availabilityByName.get(option.value) ?? 0;
+      return (
+        <Group gap="xs" wrap="nowrap" w="100%" justify="space-between">
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {option.label}
+          </span>
+          {available < totalSources && (
+            <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+              {available}/{totalSources} sources
+            </Text>
+          )}
+        </Group>
+      );
+    },
+    [availabilityByName, totalSources],
+  );
+
+  return (
+    <MultiSelect
+      size="xs"
+      data={data}
+      value={value}
+      onChange={onChange}
+      searchable
+      clearable
+      placeholder={value.length === 0 ? 'Add columns' : undefined}
+      aria-label="Add columns"
+      maxDropdownHeight={280}
+      renderOption={renderOption}
+      data-testid="multi-source-column-picker"
+    />
+  );
+}