Merge "Show flows in a table instead of a tree." into main

Author: Alexander Timin

test/data/ui-screenshots/ui-chrome_rendering_desktop_select_slice_with_flows.png.sha256

@@ -1 +1 @@
-a6600fd33a8d32fb5feb04803bf2532caea7b4844affa407edadd4f467783654
+5ad6cc48d5e9147ad52d017a71409a6f8c0f0dc246d98fec4637f1153585841d

ui/src/frontend/thread_slice_details_tab.ts

@@ -15,7 +15,7 @@
 import m from 'mithril';
 
 import {Icons} from '../base/semantic_icons';
-import {duration, Time, TimeSpan} from '../base/time';
+import {Time, TimeSpan} from '../base/time';
 import {exists} from '../base/utils';
 import {raf} from '../core/raf_scheduler';
 import {Engine} from '../trace_processor/engine';
@@ -25,11 +25,11 @@ import {DetailsShell} from '../widgets/details_shell';
 import {GridLayout, GridLayoutColumn} from '../widgets/grid_layout';
 import {MenuItem, PopupMenu2} from '../widgets/menu';
 import {Section} from '../widgets/section';
-import {Tree, TreeNode} from '../widgets/tree';
+import {Tree} from '../widgets/tree';
 
 import {BottomTab, NewBottomTabArgs} from './bottom_tab';
 import {addDebugSliceTrack} from './debug_tracks/debug_tracks';
-import {FlowPoint, globals} from './globals';
+import {Flow, FlowPoint, globals} from './globals';
 import {addQueryResultsTab} from './query_result_tab';
 import {hasArgs, renderArguments} from './slice_args';
 import {renderDetails} from './slice_details';
@@ -43,6 +43,7 @@ import {DurationWidget} from './widgets/duration';
 import {addSqlTableTab} from './sql_table_tab';
 import {SqlTables} from './widgets/sql/table/well_known_sql_tables';
 import {SliceRef} from './widgets/slice';
+import {BasicTable} from '../widgets/basic_table';
 
 interface ContextMenuItem {
   name: string;
@@ -363,12 +364,35 @@ export class ThreadSliceDetailsTab extends BottomTab<ThreadSliceDetailsTabConfig
       return m(
         Section,
         {title: 'Preceding Flows'},
-        m(
-          Tree,
-          inFlows.map(({begin, dur}) =>
-            this.renderFlow(begin, dur, !isRunTask),
-          ),
-        ),
+        m(BasicTable, {
+          columns: [
+            {
+              title: 'Slice',
+              render: (flow: Flow) =>
+                m(SliceRef, {
+                  id: asSliceSqlId(flow.begin.sliceId),
+                  name:
+                    flow.begin.sliceChromeCustomName ?? flow.begin.sliceName,
+                  ts: flow.begin.sliceStartTs,
+                  dur: flow.begin.sliceEndTs - flow.begin.sliceStartTs,
+                  sqlTrackId: flow.begin.trackId,
+                }),
+            },
+            {
+              title: 'Delay',
+              render: (flow: Flow) =>
+                m(DurationWidget, {
+                  dur: flow.end.sliceStartTs - flow.begin.sliceEndTs,
+                }),
+            },
+            {
+              title: 'Thread',
+              render: (flow: Flow) =>
+                this.getThreadNameForFlow(flow.begin, !isRunTask),
+            },
+          ],
+          data: inFlows,
+        }),
       );
     } else {
       return null;
@@ -387,45 +411,47 @@ export class ThreadSliceDetailsTab extends BottomTab<ThreadSliceDetailsTabConfig
       return m(
         Section,
         {title: 'Following Flows'},
-        m(
-          Tree,
-          outFlows.map(({end, dur}) => this.renderFlow(end, dur, !isPostTask)),
-        ),
+        m(BasicTable, {
+          columns: [
+            {
+              title: 'Slice',
+              render: (flow: Flow) =>
+                m(SliceRef, {
+                  id: asSliceSqlId(flow.end.sliceId),
+                  name: flow.end.sliceChromeCustomName ?? flow.end.sliceName,
+                  ts: flow.end.sliceStartTs,
+                  dur: flow.end.sliceEndTs - flow.end.sliceStartTs,
+                  sqlTrackId: flow.end.trackId,
+                }),
+            },
+            {
+              title: 'Delay',
+              render: (flow: Flow) =>
+                m(DurationWidget, {
+                  dur: flow.end.sliceEndTs - flow.end.sliceStartTs,
+                }),
+            },
+            {
+              title: 'Thread',
+              render: (flow: Flow) =>
+                this.getThreadNameForFlow(flow.end, !isPostTask),
+            },
+          ],
+          data: outFlows,
+        }),
       );
     } else {
       return null;
     }
   }
 
-  private renderFlow(
+  private getThreadNameForFlow(
     flow: FlowPoint,
-    dur: duration,
     includeProcessName: boolean,
-  ): m.Children {
-    const description =
-      flow.sliceChromeCustomName === undefined
-        ? flow.sliceName
-        : flow.sliceChromeCustomName;
-    const threadName = includeProcessName
+  ): string {
+    return includeProcessName
       ? `${flow.threadName} (${flow.processName})`
       : flow.threadName;
-
-    return m(
-      TreeNode,
-      {left: 'Flow'},
-      m(TreeNode, {
-        left: 'Slice',
-        right: m(SliceRef, {
-          id: asSliceSqlId(flow.sliceId),
-          name: description,
-          ts: flow.sliceStartTs,
-          dur: flow.sliceEndTs - flow.sliceStartTs,
-          sqlTrackId: flow.trackId,
-        }),
-      }),
-      m(TreeNode, {left: 'Delay', right: m(DurationWidget, {dur})}),
-      m(TreeNode, {left: 'Thread', right: threadName}),
-    );
   }
 
   private renderContextButton(sliceInfo: SliceDetails): m.Children {