bt-ui: Implement and polish Bigtrace asynchronous queries

ui/src/bigtrace/help_modal.ts

@@ -43,8 +43,8 @@ class BigTraceHelpContent implements m.ClassComponent {
         ),
         m(
           'tr',
-          m('td', keycap('Ctrl'), ' + ', keycap('Enter'), ' (with selection)'),
-          m('td', 'Execute selection'),
+          m('td', keycap('Ctrl'), ' + ', keycap('Enter')),
+          m('td', 'Execute selected text (when text is selected)'),
         ),
       ),
       m('h2', 'Running commands'),

ui/src/bigtrace/index.ts

@@ -21,7 +21,7 @@ import {initLiveReload} from '../core/live_reload';
 import {settingsStorage} from './settings/settings_storage';
 import {ThemeProvider} from '../frontend/theme_provider';
 import {OverlayContainer} from '../widgets/overlay_container';
-import {QueryPage} from './pages/query_page';
+import {QueryPage, queryRightSidebarToggleFn} from './pages/query_page';
 import {HomePage} from './pages/home_page';
 import {bigTraceSettingsStorage} from './settings/bigtrace_settings_storage';
 import {queryState} from './query/query_state';
@@ -62,6 +62,11 @@ function setupContentSecurityPolicy() {
       `'self'`,
       'https://autopush-brush-googleapis.corp.google.com',
       'https://brush-googleapis.corp.google.com',
+      // Allow local reference backends (see tools/bigtrace_ref_backend in
+      // perfetto_2) so the UI can be developed against a mock without
+      // depending on the production endpoint.
+      'http://localhost:*',
+      'http://127.0.0.1:*',
     ],
     'img-src': [`'self'`, 'data:', 'blob:'],
     'style-src': [
@@ -225,7 +230,7 @@ class BigTraceRoot implements m.ClassComponent {
     switch (route) {
       case Routes.QUERY:
         return m(QueryPage, {
-          useBrushBackend: true,
+          useBigtraceBackend: true,
           initialQuery: this.queryInitialQuery,
         });
       case Routes.SETTINGS:
@@ -264,11 +269,23 @@ function registerCommands() {
     defaultHotkey: '!Mod+B',
   });
 
+  app.commands.registerCommand({
+    id: 'bigtrace.ToggleQueryRightSidebar',
+    name: 'Toggle query right sidebar (History / Stdlib Schemas)',
+    callback: () => {
+      queryRightSidebarToggleFn?.();
+    },
+    defaultHotkey: '!Mod+Shift+B',
+  });
+
   app.commands.registerCommand({
     id: 'bigtrace.ShowHelp',
     name: 'Show help',
     callback: () => toggleHelp(),
-    defaultHotkey: '?',
+    // The '!' prefix lets '?' fire even when an editable element (the
+    // always-rendered topbar omnibox) has focus. preventDefault then
+    // stops the keystroke from being typed into the omnibox.
+    defaultHotkey: '!?',
   });
 }
 

ui/src/bigtrace/layout/omnibox.ts

@@ -108,7 +108,10 @@ export class Omnibox implements m.ClassComponent {
 
   private renderCommandOmnibox(): m.Children {
     const {commands, omnibox} = BigTraceApp.instance;
-    const allCmds = commands.getCommands();
+    // OpenCommandPalette is a no-op when invoked from inside itself.
+    const allCmds = commands
+      .getCommands()
+      .filter((c) => c.id !== 'bigtrace.OpenCommandPalette');
     const filteredCmds = fuzzyFilterCommands(allCmds, omnibox.text);
 
     const commandsWithHeuristics = filteredCmds.map((cmd) => {
@@ -118,13 +121,11 @@ export class Omnibox implements m.ClassComponent {
       };
     });
 
-    const sorted = commandsWithHeuristics.sort((a, b) => {
-      if (b.recentsIndex === a.recentsIndex) {
-        return 0;
-      } else {
-        return b.recentsIndex - a.recentsIndex;
-      }
-    });
+    // Sort by recentsIndex descending — used commands (>=0) above
+    // never-used (-1).
+    const sorted = commandsWithHeuristics.sort(
+      (a, b) => b.recentsIndex - a.recentsIndex,
+    );
 
     const options = sorted.map(({recentsIndex, cmd}): OmniboxOption => {
       const {segments, id, defaultHotkey, source} = cmd;
@@ -223,13 +224,15 @@ export class Omnibox implements m.ClassComponent {
     }
     return m(OmniboxWidget, {
       value: omnibox.text,
-      placeholder: `Search or type ${hints.join(', ')}`,
+      // Don't say "Search" — search submit is a no-op in BigTrace.
+      placeholder: `Type ${hints.join(', ')}`,
       inputRef: OMNIBOX_INPUT_REF,
       onInput: (value, _prev) => {
         if (value === '>') {
           omnibox.setMode(OmniboxMode.Command);
           return;
         }
+        // Check registered mode triggers.
         if (value.length === 1 && omnibox.registeredModes.has(value)) {
           omnibox.activateRegisteredMode(value);
           return;
@@ -242,6 +245,8 @@ export class Omnibox implements m.ClassComponent {
         }
       },
       onSubmit: (_value, _mod, _shift) => {
+        // BigTrace has no trace-level search; submitting from the search
+        // omnibox is a no-op other than blurring the input.
         if (this.omniboxInputEl) {
           this.omniboxInputEl.blur();
         }
@@ -591,7 +596,11 @@ class OmniboxWidget implements m.ClassComponent<OmniboxWidgetAttrs> {
   }
 }
 
-function fuzzyFilterCommands(commands: readonly Command[], searchTerm: string) {
+// Returns Commands annotated with `segments` for highlighted rendering.
+function fuzzyFilterCommands(
+  commands: readonly Command[],
+  searchTerm: string,
+): Array<Command & {segments: FuzzySegment[]}> {
   const finder = new FuzzyFinder(commands, ({name}) => name);
   return finder.find(searchTerm).map((result) => {
     return {segments: result.segments, ...result.item};

ui/src/bigtrace/layout/sidebar.ts

@@ -17,11 +17,12 @@ import {assetSrc} from '../../base/assets';
 import {Icon} from '../../widgets/icon';
 import {getOrCreate} from '../../base/utils';
 import {classNames} from '../../base/classnames';
+import {setRoute} from '../router';
+import {Routes} from '../routes';
 
 const SIDEBAR_SECTIONS = {
   bigtrace: {
     title: 'BigTrace',
-    summary: 'Query and analyze large traces',
     defaultCollapsed: false,
   },
 } as const;
@@ -57,14 +58,16 @@ export class Sidebar implements m.ClassComponent<SidebarAttrs> {
           m(
             'h1',
             {
+              // Title clicks go home; setRoute keeps history/back working.
               style: {
                 margin: 0,
-                fontSize: '18px',
-                fontWeight: 'bold',
                 display: 'flex',
                 alignItems: 'center',
                 gap: '8px',
+                cursor: 'pointer',
               },
+              title: 'Go to BigTrace home',
+              onclick: () => setRoute(Routes.HOME),
             },
             m('img', {
               src: assetSrc('assets/logo-128.png'),