ui: bigtrace select the traces of an experiment

The backend can now fan a query out over one arm of an experiment. This
puts that in the user's hands and carries it everywhere the rest of the
trace selection already goes.

The trace grid's header gains an Experiment Filter. Searching asks
/v1/experiments (one capped page, debounced, never for an empty box —
matching the whole catalog is a round-trip nobody can use), and each
result offers both arms: id first, then the name, which routinely runs
past a hundred characters and so is clamped everywhere with the whole of
it in the tooltip. An arm the caller can't query is prefixed "(Not
available in Telemetry datasets)" and stays selectable — the backend
denies at execution, not the UI. Picking one replaces the button with the
arm toggle, the chosen arm, and a way to clear it; switching arm or
clearing refetches the grid, so what it lists stays what a run would
process.

From there it travels as any other part of the selection: shipped as the
top-level experiment_filter on /execute_* and /trace_metadata, persisted
with the tab, copied by Clone, restored from the submit-time snapshot
when a query is reopened from History, captured by and applied from a
preset (which a preset states as ids and arm alone), compared when the
launcher works out which preset a tab is running, held provisional by
Trace Selection's Cancel/Apply, and summarised in the chip strip. Ids are
numbers on the wire in both directions and stay numbers throughout, so
there is no conversion to keep in step; display names never travel — they
are resolved from /v1/experiment_metadata once per id, and only onto the
filter that asked for them.

Author: gignat-dev

ui/src/assets/bigtrace.scss

@@ -1009,6 +1009,128 @@ pre.pf-bt-history-item-query--standalone {
   }
 }
 
+// A chosen experiment's name can be a sentence; the chip states which arm
+// and as much of it as fits, with the whole of both arms in the tooltip.
+.pf-bt-settings-bar .pf-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 32rem;
+}
+
+// Trace-grid header row: column picker left, experiment filter hard right.
+.pf-bt-trace-columns {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+// Chosen experiment: arm toggle, the active arm, and the way to clear it.
+// The name is free to clamp; the id stays whole.
+.pf-bt-experiment-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  margin-left: auto;
+
+  &__open {
+    margin-left: auto;
+  }
+
+  &__arm {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 320px;
+  }
+}
+
+// The popup box itself, so the one thing that can hang off the screen is
+// bounded on the element that hangs. Everything from here down is sized by
+// its content, so the viewport is the only fixed thing to measure against:
+// its width less the 8px per side Popup keeps clear of the edges. Border and
+// padding are inside the number, the box being border-box.
+// Two classes deep to outrank the widget's own `--fit-content`, which unsets
+// max-width to let content decide the size — content still decides, it just
+// can't decide to leave the screen.
+.pf-popup.pf-bt-experiment-popup {
+  max-width: calc(100vw - 16px);
+}
+
+// Experiment search popup. Own block, like the connection panel — the shared
+// popup content class stays untouched.
+.pf-bt-experiment-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  // Follows the window, so a wide screen gets a wide popup; bounded in rem
+  // so it also respects the reader's font size, stays usable when narrow,
+  // and never runs a name past a comfortable line length.
+  width: clamp(30rem, 40vw, 60rem);
+  // The floor would otherwise win over a very narrow window; yielding to the
+  // box around it is what makes that cap effective, since a width this
+  // explicit would happily overflow its container.
+  max-width: 100%;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  &__note {
+    color: var(--pf-color-text-muted);
+    padding: 4px 0;
+  }
+
+  // One experiment: both arms, picked as a unit.
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--pf-color-background-secondary);
+    }
+  }
+
+  &__arm {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  &__label {
+    color: var(--pf-color-text-muted);
+    font-size: smaller;
+    flex: 0 0 72px;
+  }
+
+  &__id {
+    font-variant-numeric: tabular-nums;
+    flex: 0 0 auto;
+  }
+
+  // Choosing is done by the name, so it wraps rather than truncates; the id
+  // and label keep their column while it does.
+  &__name {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+
+    &--denied {
+      color: var(--pf-color-text-muted);
+    }
+  }
+}
+
 // Query-settings modal (gear in the run toolbar): the settings form without
 // the page chrome — the modal provides the frame and the scrolling.
 .pf-bt-query-settings-modal {

ui/src/bigtrace/pages/bigtrace_settings_bar.ts

@@ -20,6 +20,11 @@ import type {Filter} from '../../components/widgets/datagrid/model';
 import {bigTraceSettingsStorage} from '../settings/bigtrace_settings_storage';
 import type {Setting as BigTraceSetting} from '../settings/settings_types';
 import type {SettingsBindings} from '../settings/tab_bound_setting';
+import {
+  describeExperimentFilter,
+  ensureExperimentNames,
+  summarizeExperimentFilter,
+} from './experiment_filter_control';
 import {
   isTraceSelectionSetting,
   openSettings,
@@ -70,6 +75,7 @@ export class BigtraceSettingsBar implements m.ClassComponent<BigtraceSettingsBar
           ? renderUuidChip(bindings)
           : [
               renderSettingChips(bindings),
+              renderExperimentChip(bindings),
               renderFilterChips(tab, tabsState, bindings),
             ],
       ),
@@ -140,6 +146,23 @@ function renderSettingChip(
   });
 }
 
+// The experiment/control arm the query runs over. Named once the catalog
+// answers; until then the id says which one it is.
+function renderExperimentChip(bindings: SettingsBindings): m.Children {
+  const filter = bindings.getExperimentFilter();
+  if (filter === undefined) return null;
+  ensureExperimentNames(bindings);
+  return m(Chip, {
+    label: `${filter.isTreatment ? 'Experiment' : 'Control'}: ${summarizeExperimentFilter(filter)}`,
+    title: describeExperimentFilter(filter),
+    removable: true,
+    onRemove: () => {
+      bindings.setExperimentFilter(undefined);
+      m.redraw();
+    },
+  });
+}
+
 function renderFilterChips(
   tab: BigTraceEditorTab,
   tabsState: QueryTabsState,

ui/src/bigtrace/pages/editor_tab_view.ts

@@ -166,6 +166,11 @@ function buildTabBindings(
       applyModeDefaults(tab, materialize);
       tabsState.markDirty();
     },
+    getExperimentFilter: () => tab.experimentFilter,
+    setExperimentFilter: (filter) => {
+      tab.experimentFilter = filter;
+      tabsState.markDirty();
+    },
     getTraceLimit: () => tab.traceLimit,
     setTraceLimit: (limit) => {
       if (limit > 0) {