Merge branch 'main' into aaron/alphabetize-keys

Author: knudtty

.changeset/adhoc-filter-broadcast.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/common-utils': patch
+'@hyperdx/app': patch
+---
+
+feat: Broadcast adhoc dashboard filter conditions

.changeset/alert-side-panel.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+feat: Edit chart alerts in a side panel docked beside the chart editor, so the preview chart stays in view while the alert is tuned. "Add alert" / "Edit alert" opens the panel; a new alert is kept with "Add alert" and an existing one with "Update alert", while closing the panel discards the changes. The panel fills the editor's visible height and can be resized from its left edge. Save and Cancel move to the chart name row.

.changeset/configurable-content-font-size.md

@@ -0,0 +1,11 @@
+---
+'@hyperdx/app': minor
+---
+
+feat: add a content font size preference
+
+Small text in the log/trace table was not adjustable without browser zoom, which
+also shrinks the surrounding chrome. User preferences now carry a **Content font
+size** setting (small / medium / large) that scales the search results table,
+data tables, expanded row JSON, and chart axes, legends, and tooltips. Small is
+the default and matches the previous sizes, so nothing changes until you opt in.

.changeset/release-marker-tooltip-wrap.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: Wrap long values in release marker tooltips instead of overflowing

.changeset/stream-filter-values.md

@@ -0,0 +1,7 @@
+---
+'@hyperdx/app': patch
+'@hyperdx/common-utils': patch
+---
+
+perf: stream filter values into the UI as each query finishes instead of
+waiting for all of them

packages/app/pages/_app.tsx

@@ -33,6 +33,7 @@ import { NextApiConfigResponseData } from '@/types';
 import { ConfirmProvider } from '@/useConfirm';
 import {
   SystemColorSchemeScript,
+  useContentFontSize,
   useResolvedColorScheme,
   useUserPreferences,
 } from '@/useUserPreferences';
@@ -98,6 +99,8 @@ function AppContent({
   const { userPreferences } = useUserPreferences();
   const resolvedColorScheme = useResolvedColorScheme();
   const { themeName } = useAppTheme();
+  const { base: contentFontSize, compact: compactContentFontSize } =
+    useContentFontSize();
 
   // ClickStack theme always uses Inter font - user preference is ignored
   // HyperDX theme allows user to select font preference
@@ -115,6 +118,21 @@ function AppContent({
     }
   }, [effectiveFont]);
 
+  useEffect(() => {
+    // Single write point for the content font size preference; tables and
+    // chart CSS read these vars (see styles/app.scss for the defaults).
+    if (typeof document !== 'undefined') {
+      document.documentElement.style.setProperty(
+        '--hdx-content-font-size',
+        `${contentFontSize}px`,
+      );
+      document.documentElement.style.setProperty(
+        '--hdx-content-font-size-compact',
+        `${compactContentFontSize}px`,
+      );
+    }
+  }, [contentFontSize, compactContentFontSize]);
+
   const getLayout = Component.getLayout ?? (page => page);
 
   return (

packages/app/src/DBDashboardPage.tsx

@@ -35,6 +35,10 @@ import {
   isTimeSeriesDisplayType,
 } from '@hyperdx/common-utils/dist/core/utils';
 import { getBlockingRequiredFilterNames } from '@hyperdx/common-utils/dist/dashboardFilterValues';
+import {
+  getPromqlFilters,
+  getSqlFilters,
+} from '@hyperdx/common-utils/dist/filters';
 import {
   displayTypeRequiresSource,
   isBuilderChartConfig,
@@ -51,12 +55,12 @@ import {
 import { isMissingFiltersMacro } from '@hyperdx/common-utils/dist/macros';
 import {
   AlertState,
+  BroadcastFilter,
   ChartConfigWithDateRange,
   ChartVariable,
   DashboardContainer as DashboardContainerSchema,
   DashboardFilter,
   DisplayType,
-  Filter,
   getSampleWeightExpression,
   isLogSource,
   isTraceSource,
@@ -467,7 +471,7 @@ const Tile = ({
   onSettled?: () => void;
   granularity: SQLInterval | undefined;
   onTimeRangeSelect: (start: Date, end: Date) => void;
-  filters?: Filter[];
+  filters?: BroadcastFilter[];
   variables?: ChartVariable[];
   /** The dashboard's required filters that have nothing selected. */
   unsatisfiedRequiredFilters?: DashboardFilter[];
@@ -650,6 +654,15 @@ const Tile = ({
     missingRequiredFilterNames.length > 0 &&
     displayTypeRequiresSource(chart.config.displayType);
 
+  const sqlFilters = useMemo(
+    () => (filters ? getSqlFilters(filters) : undefined),
+    [filters],
+  );
+  const promqlFilters = useMemo(
+    () => (filters ? getPromqlFilters(filters) : undefined),
+    [filters],
+  );
+
   useEffect(() => {
     if (isPromqlSavedChartConfig(chart.config)) {
       if (source != null) {
@@ -660,6 +673,7 @@ const Tile = ({
           dateRange,
           granularity,
           variables: tileVariables,
+          filters: promqlFilters,
         });
       }
       return;
@@ -672,7 +686,7 @@ const Tile = ({
           ...chart.config,
           dateRange,
           granularity,
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
         });
       } else if (source != null) {
@@ -691,7 +705,7 @@ const Tile = ({
           sampleWeightExpression: getSampleWeightExpression(source),
           dateRange,
           granularity,
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
         });
       }
@@ -732,13 +746,21 @@ const Tile = ({
             ? source.bodyExpression
             : undefined,
           sampleWeightExpression: getSampleWeightExpression(source),
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
           metricTables: isMetricSource ? source.metricTables : undefined,
         });
       }
     }
-  }, [source, chart, dateRange, granularity, filters, tileVariables]);
+  }, [
+    source,
+    chart,
+    dateRange,
+    granularity,
+    sqlFilters,
+    promqlFilters,
+    tileVariables,
+  ]);
 
   const [hovered, setHovered] = useState(false);
 
@@ -809,7 +831,7 @@ const Tile = ({
       where: builderConfig?.where,
       whereLanguage: builderConfig?.whereLanguage,
       select: builderConfig?.select,
-      filters,
+      filters: sqlFilters,
     },
   );
 
@@ -819,10 +841,10 @@ const Tile = ({
   );
 
   const filterWarning = useMemo(() => {
-    const doFiltersExist = !!filters?.filter(
+    const doFiltersExist = !!sqlFilters?.filter(
       f => (f.type === 'lucene' || f.type === 'sql') && f.condition.trim(),
     )?.length;
-    const doLuceneFiltersExist = !!filters?.filter(
+    const doLuceneFiltersExist = !!sqlFilters?.filter(
       f => f.type === 'lucene' && f.condition.trim(),
     )?.length;
 
@@ -858,7 +880,7 @@ const Tile = ({
         <IconZoomExclamation size={16} color="var(--color-text-danger)" />
       </Tooltip>
     );
-  }, [filters, queriedConfig, source]);
+  }, [sqlFilters, queriedConfig, source]);
 
   const replaySearchUrl = useMemo(() => {
     return buildDashboardReplaySearchUrl({
@@ -1548,7 +1570,7 @@ const EditTileModal = ({
   isSaving?: boolean;
   onSave: (chart: Tile) => void;
   variables?: ChartVariable[];
-  getDashboardFilters: (sourceId: string | undefined) => Filter[];
+  getDashboardFilters: (sourceId: string | undefined) => BroadcastFilter[];
   unsatisfiedRequiredFilters?: DashboardFilter[];
 }) => {
   const contextZIndex = useZIndex();
@@ -2304,7 +2326,7 @@ function DBDashboardPage({
   // `sourceId`. Shared with the tile editor so its preview queries what the
   // tile does.
   const getTileFilters = useCallback(
-    (sourceId: string | undefined): Filter[] => [
+    (sourceId: string | undefined): BroadcastFilter[] => [
       {
         type: whereLanguage === 'sql' ? 'sql' : 'lucene',
         condition: where,

packages/app/src/HDXMultiSeriesTableChart.module.scss

@@ -4,6 +4,10 @@
 // .rowButtons pattern from LogTable.module.scss (lines 156-172),
 // scoped down to a single icon. See HDX-4405.
 
+.tableWrapper {
+  font-size: var(--hdx-content-font-size);
+}
+
 .tableHeader {
   // Always-on 1px separator between the sticky header and the rows. An
   // inset box-shadow rather than a border because the table sets

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -408,7 +408,7 @@ export const Table = ({
 
   return (
     <div
-      className={cx('overflow-auto h-100 fs-8', className)}
+      className={cx('overflow-auto h-100', styles.tableWrapper, className)}
       ref={tableContainerRef}
     >
       <table

packages/app/src/HDXMultiSeriesTimeChart.tsx

@@ -69,6 +69,7 @@ import {
   toStartOfInterval,
 } from './ChartUtils';
 import { useFormatTime } from './useFormatTime';
+import { useContentFontSize } from './useUserPreferences';
 
 import styles from '@styles/HDXLineChart.module.scss';
 
@@ -777,7 +778,12 @@ export function collectMemoChartGradientHexes(
 // (NumberFormat.tsx), but 2 already distinguishes values >= 0.005 from 0.
 const MAX_AXIS_MANTISSA = 2;
 
-/** Base width ceiling for a bare signed number - see MAX_AXIS_MANTISSA's comment. */
+/**
+ * Base width ceiling for a bare signed number - see MAX_AXIS_MANTISSA's
+ * comment. A character budget rather than a pixel one, which is why
+ * Y_AXIS_WIDTH scales with the content font size preference: the gutter has to
+ * grow with the tick font for this to keep holding at every setting.
+ */
 const AXIS_CHAR_BUDGET = 5;
 
 // Flat, not suffix-length-scaled - IBM Plex Mono is monospace, so a longer
@@ -1351,6 +1357,12 @@ export const MemoChart = memo(function MemoChart({
   const _id = useId();
   const id = _id.replace(/:/g, '');
 
+  // The y-axis width budget is expressed in characters (see MAX_AXIS_MANTISSA),
+  // so it has to grow with the tick font or the widest labels clip.
+  const { compact: axisTickFontSize, scale: contentFontScale } =
+    useContentFontSize();
+  const yAxisWidth = Math.round(Y_AXIS_WIDTH * contentFontScale);
+
   // recharts sync group, scoped via context (see chartSync).
   const syncId = useChartSyncId();
 
@@ -1585,14 +1597,14 @@ export const MemoChart = memo(function MemoChart({
     if (graphResults.length !== 1) return undefined;
     const drawableWidth = Math.max(
       0,
-      containerWidth - Y_AXIS_WIDTH - SINGLE_POINT_BAR_RIGHT_PADDING,
+      containerWidth - yAxisWidth - SINGLE_POINT_BAR_RIGHT_PADDING,
     );
     if (drawableWidth <= 0) return undefined;
     return Math.max(
       1,
       Math.floor(drawableWidth * SINGLE_POINT_BAR_WIDTH_RATIO),
     );
-  }, [displayType, graphResults.length, containerWidth]);
+  }, [displayType, graphResults.length, containerWidth, yAxisWidth]);
 
   const formatTime = useFormatTime();
   const xTickFormatter = useCallback(
@@ -1932,9 +1944,9 @@ export const MemoChart = memo(function MemoChart({
     }
     return layoutAnnotations(coloredAnnotations, {
       domain: xAxisDomain,
-      plotWidth: Math.max(0, containerWidth - Y_AXIS_WIDTH),
+      plotWidth: Math.max(0, containerWidth - yAxisWidth),
     });
-  }, [coloredAnnotations, xAxisDomain, containerWidth]);
+  }, [coloredAnnotations, xAxisDomain, containerWidth, yAxisWidth]);
 
   const [hoveredAnnotation, setHoveredAnnotation] =
     useState<HoveredAnnotation | null>(null);
@@ -1948,9 +1960,9 @@ export const MemoChart = memo(function MemoChart({
       // Drawable width, so markers too close together share one label. Zero on
       // the first paint (before ResponsiveContainer measures), which the
       // renderer treats as "label everything".
-      plotWidth: Math.max(0, containerWidth - Y_AXIS_WIDTH),
+      plotWidth: Math.max(0, containerWidth - yAxisWidth),
     });
-  }, [coloredAnnotations, xAxisDomain, containerWidth]);
+  }, [coloredAnnotations, xAxisDomain, containerWidth, yAxisWidth]);
 
   return (
     <div
@@ -2063,13 +2075,19 @@ export const MemoChart = memo(function MemoChart({
             type="number"
             tickFormatter={xTickFormatter}
             minTickGap={100}
-            tick={{ fontSize: 11, fontFamily: 'IBM Plex Mono, monospace' }}
+            tick={{
+              fontSize: axisTickFontSize,
+              fontFamily: 'IBM Plex Mono, monospace',
+            }}
           />
           <YAxis
-            width={Y_AXIS_WIDTH}
+            width={yAxisWidth}
             minTickGap={25}
             tickFormatter={yAxisTickFormatter}
-            tick={{ fontSize: 11, fontFamily: 'IBM Plex Mono, monospace' }}
+            tick={{
+              fontSize: axisTickFontSize,
+              fontFamily: 'IBM Plex Mono, monospace',
+            }}
             domain={yAxisDomain}
             ticks={yAxisTicks}
           />