exp: Undo/redo (#3561)

## Summary

Adds undo/redo functionality to the Explore Page, allowing users to
navigate through their query building history. Users can now undo and
redo actions using keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y) or
clickable buttons in the UI.

## Changes

### New Features
- **History tracking**: All state changes are automatically tracked,
including node creation, deletion, connection changes, and property
modifications
  - **Keyboard shortcuts**:
    - `Ctrl+Z` (or `Cmd+Z` on Mac) for undo
    - `Ctrl+Shift+Z` or `Ctrl+Y` for redo
- **Visual controls**: Floating undo/redo buttons in the bottom-right
corner with enabled/disabled states
- **Smart filtering**: Layout-only changes (dragging nodes) are excluded
from history to avoid polluting the undo stack
- **Granular tracking**: Individual property changes (e.g., selecting
group by columns) are captured as separate history entries

  ### Implementation Details

  #### Core Components
- **`HistoryManager`** (`history_manager.ts`): Manages history stack
with:
    - Max history size of 10 states to prevent unbounded memory growth
    - State serialization for comparison (excluding layout changes)
    - Undo/redo operations with circular history prevention

  - **Integration** (`explore_page.ts`):
    - Wraps `onStateUpdate` callback to intercept all state changes
    - Handles keyboard shortcuts at the page level
    - Prevents recording of undo/redo-triggered changes

  #### UI Components
  - Added undo/redo buttons to query builder (`builder.ts`)
  - Buttons show enabled/disabled state based on history availability
- Positioned in bottom-right corner with floating style (`builder.scss`)

  ### Testing
  - Comprehensive unit tests in `history_manager_unittest.ts` covering:
    - Basic undo/redo operations
    - Granular property change tracking
    - Layout-only change filtering
    - Redo stack clearing on new actions
    - History size limits
    - Complex node graphs with multiple connections

  ## Test plan

  ### Manual Testing
  1. **Basic undo/redo**:
     - Open Explore Page
     - Add a table source node
     - Press Ctrl+Z → node should disappear
     - Press Ctrl+Shift+Z → node should reappear

  2. **Granular changes**:
     - Create a table source node
     - Add an aggregation node
     - Check first group by column
     - Check second group by column
     - Press Ctrl+Z twice → both columns should uncheck in reverse order

  3. **Layout filtering**:
     - Add a node
     - Drag it to a different position
- Press Ctrl+Z → node position should stay, but the node itself should
disappear (proving layout changes don't create history entries)

  4. **UI buttons**:
     - Verify undo/redo buttons appear in bottom-right corner
     - Verify buttons are disabled when no undo/redo is available
     - Click buttons to undo/redo actions

  5. **History limit**:
     - Perform more than 10 distinct actions
     - Attempt to undo → should only undo last 10 actions

  6. **Redo stack clearing**:
     - Add a node
     - Press Ctrl+Z (undo)
     - Add a different node
     - Press Ctrl+Shift+Z → redo should not be available

  ### Automated Testing
  ```bash
  ui/run-unittests history_manager_unittest

Author: aMayzner

ui/src/base/semantic_icons.ts

@@ -51,6 +51,7 @@ export class Icons {
   static readonly Search = 'search';
   static readonly Save = 'save';
   static readonly Undo = 'undo';
+  static readonly Redo = 'redo';
 
   // Page control
   static readonly NextPage = 'chevron_right';

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

@@ -28,6 +28,7 @@ import {exportStateAsJson, importStateFromJson} from './json_handler';
 import {showImportWithStatementModal} from './sql_json_handler';
 import {registerCoreNodes} from './query_builder/core_nodes';
 import {nodeRegistry} from './query_builder/node_registry';
+import {HistoryManager} from './history_manager';
 
 registerCoreNodes();
 
@@ -50,6 +51,8 @@ interface ExplorePageAttrs {
 }
 
 export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
+  private historyManager?: HistoryManager;
+
   private selectNode(attrs: ExplorePageAttrs, node: QueryNode) {
     attrs.onStateUpdate((currentState) => ({
       ...currentState,
@@ -271,7 +274,7 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
       parentNodes.push(node.prevNode);
     } else if ('prevNodes' in node) {
       for (const prevNode of node.prevNodes) {
-        if (prevNode) parentNodes.push(prevNode);
+        if (prevNode !== undefined) parentNodes.push(prevNode);
       }
     }
 
@@ -386,6 +389,28 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
       return;
     }
 
+    // Handle undo/redo shortcuts
+    if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
+      if (event.shiftKey) {
+        // Ctrl+Shift+Z or Cmd+Shift+Z for Redo
+        this.handleRedo(attrs);
+        event.preventDefault();
+        return;
+      } else {
+        // Ctrl+Z or Cmd+Z for Undo
+        this.handleUndo(attrs);
+        event.preventDefault();
+        return;
+      }
+    }
+
+    // Also support Ctrl+Y for Redo on Windows/Linux
+    if ((event.ctrlKey || event.metaKey) && event.key === 'y') {
+      this.handleRedo(attrs);
+      event.preventDefault();
+      return;
+    }
+
     // Handle source node creation shortcuts
     for (const [id, descriptor] of nodeRegistry.list()) {
       if (
@@ -418,6 +443,24 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
     showImportWithStatementModal(trace, sqlModules, onStateUpdate);
   }
 
+  private handleUndo(attrs: ExplorePageAttrs) {
+    if (!this.historyManager) return;
+
+    const previousState = this.historyManager.undo();
+    if (previousState) {
+      attrs.onStateUpdate(previousState);
+    }
+  }
+
+  private handleRedo(attrs: ExplorePageAttrs) {
+    if (!this.historyManager) return;
+
+    const nextState = this.historyManager.redo();
+    if (nextState) {
+      attrs.onStateUpdate(nextState);
+    }
+  }
+
   view({attrs}: m.CVnode<ExplorePageAttrs>) {
     const {trace, state} = attrs;
 
@@ -433,10 +476,38 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
       );
     }
 
+    // Initialize history manager if not already done
+    if (!this.historyManager) {
+      this.historyManager = new HistoryManager(trace, sqlModules);
+      // Push initial state
+      this.historyManager.pushState(state);
+    }
+
+    // Wrap onStateUpdate to track history
+    const wrappedOnStateUpdate = (
+      update:
+        | ExplorePageState
+        | ((currentState: ExplorePageState) => ExplorePageState),
+    ) => {
+      attrs.onStateUpdate((currentState) => {
+        const newState =
+          typeof update === 'function' ? update(currentState) : update;
+        // Push state to history after update
+        this.historyManager?.pushState(newState);
+        return newState;
+      });
+    };
+
+    // Create wrapped attrs to track history
+    const wrappedAttrs = {
+      ...attrs,
+      onStateUpdate: wrappedOnStateUpdate,
+    };
+
     return m(
       '.pf-explore-page',
       {
-        onkeydown: (e: KeyboardEvent) => this.handleKeyDown(e, attrs),
+        onkeydown: (e: KeyboardEvent) => this.handleKeyDown(e, wrappedAttrs),
         oncreate: (vnode) => {
           (vnode.dom as HTMLElement).focus();
         },
@@ -449,20 +520,21 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
         selectedNode: state.selectedNode,
         nodeLayouts: state.nodeLayouts,
         devMode: state.devMode,
-        onDevModeChange: (enabled) => this.handleDevModeChange(attrs, enabled),
+        onDevModeChange: (enabled) =>
+          this.handleDevModeChange(wrappedAttrs, enabled),
         onRootNodeCreated: (node) => {
-          attrs.onStateUpdate((currentState) => ({
+          wrappedAttrs.onStateUpdate((currentState) => ({
             ...currentState,
             rootNodes: [...currentState.rootNodes, node],
             selectedNode: node,
           }));
         },
         onNodeSelected: (node) => {
-          if (node) this.selectNode(attrs, node);
+          if (node) this.selectNode(wrappedAttrs, node);
         },
-        onDeselect: () => this.deselectNode(attrs),
+        onDeselect: () => this.deselectNode(wrappedAttrs),
         onNodeLayoutChange: (nodeId, layout) => {
-          attrs.onStateUpdate((currentState) => {
+          wrappedAttrs.onStateUpdate((currentState) => {
             const newNodeLayouts = new Map(currentState.nodeLayouts);
             newNodeLayouts.set(nodeId, layout);
             return {
@@ -472,27 +544,28 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
           });
         },
         onAddSourceNode: (id) => {
-          this.handleAddSourceNode(attrs, id);
+          this.handleAddSourceNode(wrappedAttrs, id);
         },
         onAddOperationNode: (id, node) => {
-          this.handleAddOperationNode(attrs, node, id);
+          this.handleAddOperationNode(wrappedAttrs, node, id);
         },
-        onClearAllNodes: () => this.handleClearAllNodes(attrs),
+        onClearAllNodes: () => this.handleClearAllNodes(wrappedAttrs),
         onDuplicateNode: () => {
           if (state.selectedNode) {
-            this.handleDuplicateNode(attrs, state.selectedNode);
+            this.handleDuplicateNode(wrappedAttrs, state.selectedNode);
           }
         },
         onDeleteNode: () => {
           if (state.selectedNode) {
-            this.handleDeleteNode(attrs, state.selectedNode);
+            this.handleDeleteNode(wrappedAttrs, state.selectedNode);
           }
         },
         onConnectionRemove: (fromNode, toNode) => {
-          this.handleConnectionRemove(attrs, fromNode, toNode);
+          this.handleConnectionRemove(wrappedAttrs, fromNode, toNode);
         },
-        onImport: () => this.handleImport(attrs),
-        onImportWithStatement: () => this.handleImportWithStatement(attrs),
+        onImport: () => this.handleImport(wrappedAttrs),
+        onImportWithStatement: () =>
+          this.handleImportWithStatement(wrappedAttrs),
         onExport: () => this.handleExport(state, trace),
         onRemoveFilter: (node, filter) => {
           if (node.state.filters) {
@@ -501,8 +574,19 @@ export class ExplorePage implements m.ClassComponent<ExplorePageAttrs> {
               node.state.filters.splice(filterIndex, 1);
             }
           }
-          attrs.onStateUpdate((currentState) => ({...currentState}));
+          wrappedAttrs.onStateUpdate((currentState) => ({...currentState}));
+        },
+        onNodeStateChange: () => {
+          // Trigger a state update when node properties change (e.g., selecting group by columns)
+          // This ensures these granular changes are captured in history
+          wrappedAttrs.onStateUpdate((currentState) => {
+            return {...currentState};
+          });
         },
+        onUndo: () => this.handleUndo(attrs),
+        onRedo: () => this.handleRedo(attrs),
+        canUndo: this.historyManager?.canUndo() ?? false,
+        canRedo: this.historyManager?.canRedo() ?? false,
       }),
     );
   }

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

@@ -0,0 +1,126 @@
+// Copyright (C) 2025 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {ExplorePageState} from './explore_page';
+import {serializeState, deserializeState} from './json_handler';
+import {Trace} from '../../public/trace';
+import {SqlModules} from '../dev.perfetto.SqlModules/sql_modules';
+
+const MAX_HISTORY_SIZE = 10;
+
+export class HistoryManager {
+  private history: string[] = [];
+  private currentIndex: number = -1;
+  private isUndoRedoInProgress: boolean = false;
+  private lastSerializedState?: string;
+
+  constructor(
+    private trace: Trace,
+    private sqlModules: SqlModules,
+  ) {}
+
+  // Serialize only the meaningful parts (exclude nodeLayouts and selectedNode)
+  private serializeForComparison(state: ExplorePageState): string {
+    const stateWithoutLayoutAndSelection = {
+      ...state,
+      nodeLayouts: new Map(), // Exclude layout from comparison
+      selectedNode: undefined, // Exclude selected node from comparison
+    };
+    return serializeState(stateWithoutLayoutAndSelection);
+  }
+
+  // Push a new state to history
+  pushState(state: ExplorePageState): void {
+    // Don't record history changes triggered by undo/redo
+    if (this.isUndoRedoInProgress) {
+      return;
+    }
+
+    const serialized = serializeState(state);
+    const serializedForComparison = this.serializeForComparison(state);
+
+    // Skip if the meaningful state (without layout) hasn't changed
+    // This filters out layout-only changes while capturing all other changes
+    if (
+      this.lastSerializedState &&
+      serializedForComparison === this.lastSerializedState
+    ) {
+      return;
+    }
+
+    this.lastSerializedState = serializedForComparison;
+
+    // If we're not at the end of history, remove everything after current index
+    if (this.currentIndex < this.history.length - 1) {
+      this.history = this.history.slice(0, this.currentIndex + 1);
+    }
+
+    // Add the new state
+    this.history.push(serialized);
+
+    // Keep only the last MAX_HISTORY_SIZE states
+    if (this.history.length > MAX_HISTORY_SIZE) {
+      this.history.shift();
+    } else {
+      this.currentIndex++;
+    }
+  }
+
+  // Undo to previous state
+  undo(): ExplorePageState | null {
+    if (!this.canUndo()) {
+      return null;
+    }
+
+    this.currentIndex--;
+    this.isUndoRedoInProgress = true;
+    const state = deserializeState(
+      this.history[this.currentIndex],
+      this.trace,
+      this.sqlModules,
+    );
+    this.isUndoRedoInProgress = false;
+    return state;
+  }
+
+  // Redo to next state
+  redo(): ExplorePageState | null {
+    if (!this.canRedo()) {
+      return null;
+    }
+
+    this.currentIndex++;
+    this.isUndoRedoInProgress = true;
+    const state = deserializeState(
+      this.history[this.currentIndex],
+      this.trace,
+      this.sqlModules,
+    );
+    this.isUndoRedoInProgress = false;
+    return state;
+  }
+
+  canUndo(): boolean {
+    return this.currentIndex > 0;
+  }
+
+  canRedo(): boolean {
+    return this.currentIndex < this.history.length - 1;
+  }
+
+  clear(): void {
+    this.history = [];
+    this.currentIndex = -1;
+  }
+}