Merge "ui: Add track selection" into main

Author: stevegolton

ui/src/core/selection_manager.ts

@@ -92,6 +92,10 @@ export class SelectionManagerImpl implements SelectionManager {
     );
   }
 
+  selectTrack(trackUri: string, opts?: SelectionOpts) {
+    this.setSelection({kind: 'track', trackUri}, opts);
+  }
+
   selectNote(args: {id: string}, opts?: SelectionOpts) {
     this.setSelection(
       {
@@ -230,8 +234,9 @@ export class SelectionManagerImpl implements SelectionManager {
     }
     switch (source) {
       case 'track':
-        this.scrollHelper.scrollTo({
-          track: {uri: trackUri, expandGroup: true},
+        this.selectTrack(trackUri, {
+          clearSearch: false,
+          scrollToSelection: true,
         });
         break;
       case 'cpu':
@@ -262,6 +267,7 @@ export class SelectionManagerImpl implements SelectionManager {
     const uri = (() => {
       switch (this.selection.kind) {
         case 'track_event':
+        case 'track':
           return this.selection.trackUri;
         // TODO(stevegolton): Handle scrolling to area and note selections.
         default:

ui/src/core_plugins/track_utils/index.ts

@@ -14,10 +14,11 @@
 
 import {OmniboxMode} from '../../core/omnibox_manager';
 import {Trace} from '../../public/trace';
-import {PromptOption} from '../../public/omnibox';
 import {PerfettoPlugin, PluginDescriptor} from '../../public/plugin';
 import {AppImpl} from '../../core/app_impl';
 import {getTimeSpanOfSelectionOrVisibleWindow} from '../../public/utils';
+import {exists} from '../../base/utils';
+import {TrackNode} from '../../public/workspace';
 
 class TrackUtilsPlugin implements PerfettoPlugin {
   async onTraceLoad(ctx: Trace): Promise<void> {
@@ -37,13 +38,22 @@ class TrackUtilsPlugin implements PerfettoPlugin {
 
     ctx.commands.registerCommand({
       // Selects & reveals the first track on the timeline with a given URI.
-      id: 'perfetto.FindTrack',
-      name: 'Find track by URI',
+      id: 'perfetto.FindTrackByName',
+      name: 'Find track by name',
       callback: async () => {
-        const tracks = ctx.tracks.getAllTracks();
-        const options = tracks.map(({uri}): PromptOption => {
-          return {key: uri, displayName: uri};
-        });
+        const tracks = ctx.workspace.flatTracks;
+        const options = tracks
+          .map((node) => (exists(node.uri) ? {uri: node.uri, node} : undefined))
+          .filter((pair) => pair !== undefined)
+          .map(({uri, node}) => {
+            let parent = node.parent;
+            let fullPath = [node.title];
+            while (parent && parent instanceof TrackNode) {
+              fullPath = [parent.title, ...fullPath];
+              parent = parent.parent;
+            }
+            return {key: uri, displayName: fullPath.join(' \u2023 ')};
+          });
 
         // Sort tracks in a natural sort order
         const collator = new Intl.Collator('en', {
@@ -59,12 +69,38 @@ class TrackUtilsPlugin implements PerfettoPlugin {
           sortedOptions,
         );
         if (selectedUri === undefined) return; // Prompt cancelled.
-        ctx.scrollTo({track: {uri: selectedUri, expandGroup: true}});
-        ctx.selection.selectArea({
-          start: ctx.traceInfo.start,
-          end: ctx.traceInfo.end,
-          trackUris: [selectedUri],
+        ctx.selection.selectTrack(selectedUri, {scrollToSelection: true});
+      },
+    });
+
+    ctx.commands.registerCommand({
+      // Selects & reveals the first track on the timeline with a given URI.
+      id: 'perfetto.FindTrackByUri',
+      name: 'Find track by URI',
+      callback: async () => {
+        const tracks = ctx.workspace.flatTracks;
+        const options = tracks
+          .map((track) => track.uri)
+          .filter((uri) => uri !== undefined)
+          .map((uri) => {
+            return {key: uri, displayName: uri};
+          });
+
+        // Sort tracks in a natural sort order
+        const collator = new Intl.Collator('en', {
+          numeric: true,
+          sensitivity: 'base',
+        });
+        const sortedOptions = options.sort((a, b) => {
+          return collator.compare(a.displayName, b.displayName);
         });
+
+        const selectedUri = await ctx.omnibox.prompt(
+          'Choose a track...',
+          sortedOptions,
+        );
+        if (selectedUri === undefined) return; // Prompt cancelled.
+        ctx.selection.selectTrack(selectedUri, {scrollToSelection: true});
       },
     });
   }

ui/src/frontend/tab_panel.ts

@@ -27,6 +27,10 @@ import {TraceAttrs} from '../public/trace';
 import {Monitor} from '../base/monitor';
 import {AsyncLimiter} from '../base/async_limiter';
 import {TrackEventDetailsPanel} from '../public/details_panel';
+import {DetailsShell} from '../widgets/details_shell';
+import {GridLayout, GridLayoutColumn} from '../widgets/grid_layout';
+import {Section} from '../widgets/section';
+import {Tree, TreeNode} from '../widgets/tree';
 
 interface TabWithContent extends Tab {
   content: m.Children;
@@ -194,6 +198,13 @@ export class TabPanel implements m.ClassComponent<TabPanelAttrs> {
       };
     }
 
+    if (currentSelection.kind === 'track') {
+      return {
+        isLoading: false,
+        content: this.renderTrackDetailsPanel(currentSelection.trackUri),
+      };
+    }
+
     // If there is a details panel present, show this
     const dpRenderable = this.trackEventDetailsPanel;
     if (dpRenderable) {
@@ -230,6 +241,42 @@ export class TabPanel implements m.ClassComponent<TabPanelAttrs> {
       };
     }
   }
+
+  private renderTrackDetailsPanel(trackUri: string) {
+    const track = globals.trackManager.getTrack(trackUri);
+    if (track) {
+      return m(
+        DetailsShell,
+        {title: 'Track', description: track.title},
+        m(
+          GridLayout,
+          m(
+            GridLayoutColumn,
+            m(
+              Section,
+              {title: 'Details'},
+              m(
+                Tree,
+                m(TreeNode, {left: 'Name', right: track.title}),
+                m(TreeNode, {left: 'URI', right: track.uri}),
+                m(TreeNode, {left: 'Plugin ID', right: track.pluginId}),
+                m(
+                  TreeNode,
+                  {left: 'Tags'},
+                  track.tags &&
+                    Object.entries(track.tags).map(([key, value]) => {
+                      return m(TreeNode, {left: key, right: value?.toString()});
+                    }),
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+    } else {
+      return undefined; // TODO show something sensible here
+    }
+  }
 }
 
 const FADE_TIME_MS = 50;

ui/src/frontend/track_panel.ts

@@ -263,6 +263,13 @@ function isHighlighted(node: TrackNode) {
       return true;
     }
   }
+
+  if (globals.selectionManager.selection.kind === 'track') {
+    if (globals.selectionManager.selection.trackUri === node.uri) {
+      return true;
+    }
+  }
+
   return false;
 }
 
@@ -421,6 +428,10 @@ function renderTrackDetailsButton(
         }),
         m(TreeNode, {left: 'Path', right: fullPath}),
         m(TreeNode, {left: 'Title', right: node.title}),
+        m(TreeNode, {
+          left: 'Workspace',
+          right: node.workspace?.title ?? '[no workspace]',
+        }),
         td && m(TreeNode, {left: 'Plugin ID', right: td.pluginId}),
         td &&
           m(

ui/src/frontend/ui_main.ts

@@ -50,7 +50,6 @@ import {AppImpl} from '../core/app_impl';
 import {NotesEditorTab} from './notes_panel';
 import {NotesListEditor} from './notes_list_editor';
 import {getTimeSpanOfSelectionOrVisibleWindow} from '../public/utils';
-import {scrollTo} from '../public/scroll_helper';
 
 const OMNIBOX_INPUT_REF = 'omnibox';
 
@@ -377,19 +376,6 @@ export class UiMainPerTrace implements m.ClassComponent {
         },
         defaultHotkey: 'Mod+A',
       },
-      {
-        id: 'perfetto.ScrollToTrack',
-        name: 'Scroll to track',
-        callback: async () => {
-          const opts = trace.tracks
-            .getAllTracks()
-            .map((td) => ({key: td.uri, displayName: td.uri}));
-          const result = await trace.omnibox.prompt('Choose a track', opts);
-          if (result) {
-            scrollTo({track: {uri: result, expandGroup: true}});
-          }
-        },
-      },
     ];
 
     // Register each command with the command manager

ui/src/public/selection.ts

@@ -37,6 +37,14 @@ export interface SelectionManager {
     opts?: SelectionOpts,
   ): void;
 
+  /**
+   * Select a track.
+   *
+   * @param trackUri - The URI for the track to select.
+   * @param opts - Additional options.
+   */
+  selectTrack(trackUri: string, opts?: SelectionOpts): void;
+
   /**
    * Select a track event via a sql table name + id.
    *
@@ -81,6 +89,7 @@ export interface AreaSelectionAggregator {
 
 export type Selection =
   | TrackEventSelection
+  | TrackSelection
   | AreaSelection
   | NoteSelection
   | UnionSelection
@@ -99,6 +108,11 @@ export interface TrackEventSelection extends TrackEventDetails {
   readonly eventId: number;
 }
 
+export interface TrackSelection {
+  readonly kind: 'track';
+  readonly trackUri: string;
+}
+
 export interface TrackEventDetails {
   // ts and dur are required by the core, and must be provided.
   readonly ts: time;