exp: Modifcation nodes can be added without source (#3638)

Modification nodes (like Aggregation node or Modify Columns) can now be
added from the graph, without parent node - in an invalid state

Author: aMayzner

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/graph/graph.ts

@@ -596,6 +596,12 @@ export class Graph implements m.ClassComponent<GraphAttrs> {
       attrs.onAddSourceNode,
     );
 
+    const modificationMenuItems = buildMenuItems(
+      'modification',
+      attrs.devMode,
+      attrs.onAddSourceNode,
+    );
+
     const operationMenuItems = buildMenuItems(
       'multisource',
       attrs.devMode,
@@ -608,6 +614,9 @@ export class Graph implements m.ClassComponent<GraphAttrs> {
       m(MenuDivider),
       m(MenuTitle, {label: 'Operations'}),
       ...operationMenuItems,
+      m(MenuDivider),
+      m(MenuTitle, {label: 'Modification nodes'}),
+      ...modificationMenuItems,
     ];
 
     const moreMenuItems = [

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/nodes/aggregation_node.ts

@@ -81,6 +81,11 @@ export class AggregationNode implements ModificationNode {
   readonly state: AggregationNodeState;
 
   get finalCols(): ColumnInfo[] {
+    // When there's no prevNode, aggregation doesn't make sense
+    // Return empty array to indicate no output columns
+    if (this.prevNode === undefined) {
+      return [];
+    }
     const selected = this.state.groupByColumns.filter((c) => c.checked);
     for (const agg of this.state.aggregations) {
       selected.push(
@@ -99,7 +104,7 @@ export class AggregationNode implements ModificationNode {
     };
     this.prevNode = state.prevNode;
     this.nextNodes = [];
-    if (this.state.groupByColumns.length === 0) {
+    if (this.state.groupByColumns.length === 0 && this.prevNode !== undefined) {
       this.state.groupByColumns = newColumnInfoList(
         this.prevNode.finalCols ?? [],
         false,
@@ -117,6 +122,9 @@ export class AggregationNode implements ModificationNode {
   }
 
   updateGroupByColumns() {
+    if (this.prevNode === undefined) {
+      return;
+    }
     const newGroupByColumns = newColumnInfoList(
       this.prevNode.finalCols ?? [],
       false,
@@ -321,6 +329,9 @@ export class AggregationNode implements ModificationNode {
   getStructuredQuery(): protos.PerfettoSqlStructuredQuery | undefined {
     if (!this.validate()) return;
 
+    // Defensive check: prevNode must exist for aggregation to work
+    if (this.prevNode === undefined) return undefined;
+
     // Prepare groupByColumns
     const groupByColumns = this.state.groupByColumns
       .filter((c) => c.checked)
@@ -381,6 +392,9 @@ export class AggregationNode implements ModificationNode {
   }
 
   resolveColumns() {
+    if (this.prevNode === undefined) {
+      return;
+    }
     const sourceCols = this.prevNode.finalCols ?? [];
     this.state.groupByColumns.forEach((c) => {
       const sourceCol = sourceCols.find((s) => s.name === c.name);

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/nodes/modify_columns_node.ts

@@ -489,7 +489,11 @@ export class ModifyColumnsNode implements ModificationNode {
 
   onPrevNodesUpdated() {
     // This node assumes it has only one previous node.
-    const sourceCols = this.state.prevNode.finalCols;
+    if (this.prevNode === undefined) {
+      return;
+    }
+
+    const sourceCols = this.prevNode.finalCols;
 
     const newSelectedColumns = newColumnInfoList(sourceCols);
 
@@ -525,6 +529,10 @@ export class ModifyColumnsNode implements ModificationNode {
 
   resolveColumns() {
     // Recover full column information from prevNode
+    if (this.prevNode === undefined) {
+      return;
+    }
+
     const sourceCols = this.prevNode.finalCols ?? [];
     this.state.selectedColumns.forEach((c) => {
       const sourceCol = sourceCols.find((s) => s.name === c.name);

ui/src/plugins/dev.perfetto.ExplorePage/query_node.ts

@@ -340,6 +340,7 @@ export function addConnection(
     } else {
       // Otherwise connect to prevNode (default single input from above)
       modNode.prevNode = fromNode;
+      modNode.onPrevNodesUpdated?.();
     }
   } else if ('prevNodes' in toNode && Array.isArray(toNode.prevNodes)) {
     // MultiSourceNode - multiple inputs