Allow AICallTree to be created from a time range

This is to enable us to pass the LLM data from the main thread for a
given range, rather than for the icicle of a specific, selected event.

Bug: 394552594
Change-Id: Icf66b06a3fde0649c9fb6bd80f868f9fa7ee1019
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6269154
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -714,7 +714,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof CallTreeContext) {
-      const trace = new SDK.TraceObject.RevealableEvent(context.getItem().selectedNode.event);
+      const item = context.getItem();
+      const event = item.selectedNode?.event ?? item.rootNode.event;
+      const trace = new SDK.TraceObject.RevealableEvent(event);
       return Common.Revealer.reveal(trace);
     }
     // Node picker is using linkifier.

front_end/panels/ai_assistance/agents/PerformanceAgent.test.ts

@@ -27,7 +27,7 @@ describeWithEnvironment('PerformanceAgent', () => {
       const evalScriptEvent = parsedTrace.Renderer.allTraceEntries.find(
           event => event.name === Trace.Types.Events.Name.EVALUATE_SCRIPT && event.ts === 122411195649);
       assert.exists(evalScriptEvent);
-      const aiCallTree = TimelineUtils.AICallTree.AICallTree.from(evalScriptEvent, parsedTrace);
+      const aiCallTree = TimelineUtils.AICallTree.AICallTree.fromEvent(evalScriptEvent, parsedTrace);
       assert.isOk(aiCallTree);
       const callTreeContext = new CallTreeContext(aiCallTree);
       assert.strictEqual(callTreeContext.getOrigin(), 'https://www.googletagmanager.com');
@@ -39,7 +39,7 @@ describeWithEnvironment('PerformanceAgent', () => {
       const layoutEvent = parsedTrace.Renderer.allTraceEntries.find(
           event => event.name === Trace.Types.Events.Name.LAYOUT && event.ts === 122411130078);
       assert.exists(layoutEvent);
-      const aiCallTree = TimelineUtils.AICallTree.AICallTree.from(layoutEvent, parsedTrace);
+      const aiCallTree = TimelineUtils.AICallTree.AICallTree.fromEvent(layoutEvent, parsedTrace);
       assert.isOk(aiCallTree);
       const callTreeContext = new CallTreeContext(aiCallTree);
       assert.strictEqual(callTreeContext.getOrigin(), 'Layout_90829_259_122411130078');
@@ -125,7 +125,7 @@ describeWithEnvironment('PerformanceAgent', () => {
       // A basic Layout.
       const layoutEvt = parsedTrace.Renderer.allTraceEntries.find(event => event.ts === 465457096322);
       assert.exists(layoutEvt);
-      const aiCallTree = TimelineUtils.AICallTree.AICallTree.from(layoutEvt, parsedTrace);
+      const aiCallTree = TimelineUtils.AICallTree.AICallTree.fromEvent(layoutEvt, parsedTrace);
       assert.exists(aiCallTree);
 
       const agent = new PerformanceAgent({

front_end/panels/ai_assistance/agents/PerformanceAgent.ts

@@ -132,7 +132,12 @@ export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTre
   }
 
   override getOrigin(): string {
-    const selectedEvent = this.#callTree.selectedNode.event;
+    // Although in this context we expect the call tree to have a selected node
+    // as the entrypoint into the "Ask AI" tool is via selecting a node, it is
+    // possible to build trees without a selected node, in which case we
+    // fallback to the root node.
+    const node = this.#callTree.selectedNode ?? this.#callTree.rootNode;
+    const selectedEvent = node.event;
     // Get the non-resolved (ignore sourcemaps) URL for the event. We use the
     // non-resolved URL as in the context of the AI Assistance panel, we care
     // about the origin it was served on.
@@ -168,7 +173,7 @@ export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTre
   }
 
   override getTitle(): string {
-    const {event} = this.#callTree.selectedNode;
+    const event = this.#callTree.selectedNode?.event ?? this.#callTree.rootNode.event;
     if (!event) {
       return 'unknown';
     }

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -229,7 +229,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent);
     if (perfAIEntryPointEnabled && this.parsedTrace) {
-      const aiCallTree = Utils.AICallTree.AICallTree.from(entry, this.parsedTrace);
+      const aiCallTree = Utils.AICallTree.AICallTree.fromEvent(entry, this.parsedTrace);
       if (aiCallTree) {
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
         contextMenu.footerSection().appendItem(action.title(), () => {

front_end/panels/timeline/TimelineFlameChartView.test.ts

@@ -790,7 +790,7 @@ describeWithEnvironment('TimelineFlameChartView', function() {
       // Find some task in the main thread that we can build an AI Call Tree from
       const task = parsedTrace.Renderer.allTraceEntries.find(event => {
         return Trace.Types.Events.isRunTask(event) && event.dur > 5_000 &&
-            Utils.AICallTree.AICallTree.from(event, parsedTrace) !== null;
+            Utils.AICallTree.AICallTree.fromEvent(event, parsedTrace) !== null;
       });
 
       assert.isOk(task);

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1409,7 +1409,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // an invalid event - we don't want to reset it back as it may be they are
     // clicking around in order to understand something.
     if (selectionIsEvent(selection) && this.#parsedTrace) {
-      const aiCallTree = Utils.AICallTree.AICallTree.from(selection.event, this.#parsedTrace);
+      const aiCallTree = Utils.AICallTree.AICallTree.fromEvent(selection.event, this.#parsedTrace);
       if (aiCallTree) {
         UI.Context.Context.instance().setFlavor(Utils.AICallTree.AICallTree, aiCallTree);
       }

front_end/panels/timeline/utils/AICallTree.test.ts

@@ -17,7 +17,7 @@ describeWithEnvironment('AICallTree', () => {
       return e.name === Trace.Types.Events.Name.RASTER_TASK && e.pid === 4274 && e.tid === 23555;
     });
     assert.isOk(rasterTask);
-    assert.isNull(Utils.AICallTree.AICallTree.from(rasterTask, parsedTrace));
+    assert.isNull(Utils.AICallTree.AICallTree.fromEvent(rasterTask, parsedTrace));
   });
 
   it('does not build a tree from events the renderer is not aware of', async function() {
@@ -26,7 +26,7 @@ describeWithEnvironment('AICallTree', () => {
     const shift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
     assert.isOk(shift);
     assert.isTrue(Trace.Types.Events.isSyntheticLayoutShift(shift));
-    assert.isNull(Utils.AICallTree.AICallTree.from(shift, parsedTrace));
+    assert.isNull(Utils.AICallTree.AICallTree.fromEvent(shift, parsedTrace));
   });
 
   it('supports NodeJS traces that do not have a "main thread"', async function() {
@@ -44,7 +44,7 @@ describeWithEnvironment('AICallTree', () => {
       return Trace.Types.Events.isProfileCall(event) && event.callFrame.functionName === 'callAndPauseOnStart';
     });
     assert.isOk(funcCall);
-    const callTree = Utils.AICallTree.AICallTree.from(funcCall, parsedTrace);
+    const callTree = Utils.AICallTree.AICallTree.fromEvent(funcCall, parsedTrace);
     assert.isOk(callTree);
     const expectedData = '\n' +
         `
@@ -117,7 +117,7 @@ URL #: 3
     if (!selectedEvent) {
       throw new Error('Could not find expected event.');
     }
-    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, parsedTrace);
+    const callTree = Utils.AICallTree.AICallTree.fromEvent(selectedEvent, parsedTrace);
     const expectedData = '\n' +
         `
 
@@ -170,7 +170,7 @@ self: 0.2
     if (!selectedEvent) {
       throw new Error('Could not find expected event.');
     }
-    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, parsedTrace);
+    const callTree = Utils.AICallTree.AICallTree.fromEvent(selectedEvent, parsedTrace);
     assert.isOk(callTree);
 
     // We don't need to validate the whole tree, just that it has recursion
@@ -189,7 +189,7 @@ self: 0.2
     if (!tinyEvent) {
       throw new Error('Could not find expected event.');
     }
-    const tinyStr = Utils.AICallTree.AICallTree.from(tinyEvent, parsedTrace)?.serialize();
+    const tinyStr = Utils.AICallTree.AICallTree.fromEvent(tinyEvent, parsedTrace)?.serialize();
     assert.strictEqual(tinyStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
@@ -203,7 +203,7 @@ Node: 5 – get storage`.trim());
     if (!evaluateEvent) {
       throw new Error('Could not find expected event.');
     }
-    const treeStr = Utils.AICallTree.AICallTree.from(evaluateEvent, parsedTrace)?.serialize();
+    const treeStr = Utils.AICallTree.AICallTree.fromEvent(evaluateEvent, parsedTrace)?.serialize();
     assert.strictEqual(treeStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
@@ -218,7 +218,7 @@ Node: 6 – H.la`.trim());
     if (!compileEvent) {
       throw new Error('Could not find expected event.');
     }
-    const compileStr = Utils.AICallTree.AICallTree.from(compileEvent, parsedTrace)?.serialize();
+    const compileStr = Utils.AICallTree.AICallTree.fromEvent(compileEvent, parsedTrace)?.serialize();
     assert.strictEqual(compileStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
@@ -227,33 +227,51 @@ Node: 4 – (anonymous)
 Node: 5 – Compile code`.trim());
     assert.include(compileStr, 'Compile code');
   });
-});
 
-describe('AITreeFilter', () => {
-  const makeEvent = (
-                        name: string,
-                        ts: number,
-                        dur: number,
-                        ): Trace.Types.Events.Event => ({
-    name,
-    cat: 'disabled-by-default-devtools.timeline',
-    ph: Trace.Types.Events.Phase.COMPLETE,
-    ts: Trace.Types.Timing.Micro(ts),
-    dur: Trace.Types.Timing.Micro(dur),
-    pid: Trace.Types.Events.ProcessID(1),
-    tid: Trace.Types.Events.ThreadID(4),
-    args: {},
+  it('can construct a tree from a period of time', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-interactions.json.gz');
+    // Picked this interaction event because it spans multiple icicles in the main thread.
+    // Note: if you are debugging this test, it is useful to load up this trace
+    // in RPP and look for the first "keydown" event.
+    const interaction = parsedTrace.UserInteractions.interactionEventsWithNoNesting.find(e => {
+      return Trace.Types.Events.isEventTimingStart(e.rawSourceEvent) &&
+          e.rawSourceEvent.args.data.interactionId === 3572;
+    });
+    assert.isOk(interaction);
+    const timings = Trace.Helpers.Timing.eventTimingsMicroSeconds(interaction);
+    const tree = Utils.AICallTree.AICallTree.fromTime(timings.startTime, timings.endTime, parsedTrace);
+    assert.isOk(tree);
+    const output = tree.serialize();
+    const totalNodes = output.split('\n').filter(l => l.startsWith('Node:')).length;
+    assert.strictEqual(totalNodes, 242);  // Check the min duration filter is working.
+    // Check there are 3 keydown events. This confirms that the call tree is taking events from the right timespan.
+    const keyDownEvents = output.split('\n').filter(line => {
+      return line.startsWith('Node:') && line.includes('Event: keydown');
+    });
+    assert.lengthOf(keyDownEvents, 3);
   });
+});
 
+const makeEvent = (name: string, ts: number, dur: number): Trace.Types.Events.Event => ({
+  name,
+  cat: 'disabled-by-default-devtools.timeline',
+  ph: Trace.Types.Events.Phase.COMPLETE,
+  ts: Trace.Types.Timing.Micro(ts),
+  dur: Trace.Types.Timing.Micro(dur),
+  pid: Trace.Types.Events.ProcessID(1),
+  tid: Trace.Types.Events.ThreadID(4),
+  args: {},
+});
+describe('AITreeFilter', () => {
   it('always includes the selected event', () => {
     const selectedEvent = makeEvent('selected', 0, 100);
-    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    const filter = new Utils.AICallTree.SelectedEventDurationFilter(selectedEvent);
     assert.isTrue(filter.accept(selectedEvent));
   });
 
   it('includes events that are long enough', () => {
     const selectedEvent = makeEvent('selected', 0, 100);
-    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    const filter = new Utils.AICallTree.SelectedEventDurationFilter(selectedEvent);
 
     assert.isTrue(filter.accept(makeEvent('short', 0, 1)));
     assert.isTrue(filter.accept(makeEvent('short', 0, 0.6)));
@@ -264,23 +282,25 @@ describe('AITreeFilter', () => {
 
   it('excludes events that are too short', () => {
     const selectedEvent = makeEvent('selected', 0, 100);
-    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    const filter = new Utils.AICallTree.SelectedEventDurationFilter(selectedEvent);
 
     assert.isFalse(filter.accept(makeEvent('short', 0, 0)));
     assert.isFalse(filter.accept(makeEvent('short', 0, 0.1)));
     assert.isFalse(filter.accept(makeEvent('short', 0, 0.4)));
   });
+});
 
+describe('CompileCode filter', () => {
   it('excludes COMPILE_CODE nodes if non-selected', () => {
     const selectedEvent = makeEvent('selected', 0, 100);
     const compileCodeEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
-    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    const filter = new Utils.AICallTree.ExcludeCompileCodeFilter(selectedEvent);
     assert.isFalse(filter.accept(compileCodeEvent));
   });
 
   it('includes COMPILE_CODE nodes if selected', () => {
     const selectedEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
-    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    const filter = new Utils.AICallTree.ExcludeCompileCodeFilter(selectedEvent);
     assert.isTrue(filter.accept(selectedEvent));
   });
 });