de: Add tabs to Data Explorer (#4994)

Add multi-tab support to the Data Explorer, allowing users to work on
multiple independent graph explorations simultaneously. Each tab
maintains its own state (nodes, layout, history, materialization) and
tabs persist across page reloads via localStorage and permalinks.

## Changes

- Refactored `ExplorePage` component to render multiple tabs using the
existing
`Tabs` widget, with per-tab services (query execution, cleanup, history)
- Added `explore_tabs_storage.ts` for persisting tab layout to
localStorage
  using zod schema validation
- Updated plugin (`index.ts`) to manage an array of tabs instead of a
single
state, with debounced saves and backward compatibility for v1
single-graph
  permalinks and recentGraphsStorage
- Fixed SVG marker ID collisions in `nodegraph.ts` when multiple
NodeGraph
instances exist (e.g. across tabs) by using instance-unique IDs and
scoped
  DOM queries
- Added `onTabDblClick` callback to the `Tabs` widget for tab renaming
- Registered a `beforeunload` handler to flush pending saves on page
unload

Author: aMayzner

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

@@ -46,8 +46,6 @@ interface CopyableState {
 interface PastableState {
   readonly rootNodes: QueryNode[];
   readonly nodeLayouts: Map<string, {x: number; y: number}>;
-  readonly clipboardNodes?: ClipboardEntry[];
-  readonly clipboardConnections?: ClipboardConnection[];
 }
 
 // Copies the currently selected nodes and their internal connections to a
@@ -128,19 +126,22 @@ export function copySelectedNodes(
 
 // Pastes clipboard nodes into the state. Returns the updated state fields
 // with new nodes added, or undefined if clipboard is empty.
-export function pasteClipboardNodes(state: PastableState):
+export function pasteClipboardNodes(
+  state: PastableState,
+  clipboard: ClipboardResult | undefined,
+):
   | {
       rootNodes: QueryNode[];
       selectedNodes: Set<string>;
       nodeLayouts: Map<string, {x: number; y: number}>;
     }
   | undefined {
-  if (state.clipboardNodes === undefined || state.clipboardNodes.length === 0) {
+  if (clipboard === undefined || clipboard.clipboardNodes.length === 0) {
     return undefined;
   }
 
   // Clone nodes again for this paste operation (allows multiple pastes)
-  const newNodes = state.clipboardNodes.map((entry) => entry.node.clone());
+  const newNodes = clipboard.clipboardNodes.map((entry) => entry.node.clone());
 
   // Calculate paste offset (place slightly offset from original)
   const pasteOffsetX = 50;
@@ -149,7 +150,7 @@ export function pasteClipboardNodes(state: PastableState):
   // Update layouts for new nodes - only add layouts for undocked nodes
   // Docked nodes will remain docked (attached to their parent)
   const updatedLayouts = new Map(state.nodeLayouts);
-  state.clipboardNodes.forEach((entry, index) => {
+  clipboard.clipboardNodes.forEach((entry, index) => {
     if (!entry.isDocked) {
       updatedLayouts.set(newNodes[index].nodeId, {
         x: entry.relativeX + pasteOffsetX,
@@ -159,13 +160,11 @@ export function pasteClipboardNodes(state: PastableState):
   });
 
   // Restore connections between pasted nodes
-  if (state.clipboardConnections) {
-    for (const conn of state.clipboardConnections) {
-      const fromNode = newNodes[conn.fromIndex] as QueryNode | undefined;
-      const toNode = newNodes[conn.toIndex] as QueryNode | undefined;
-      if (fromNode !== undefined && toNode !== undefined) {
-        addConnection(fromNode, toNode, conn.portIndex);
-      }
+  for (const conn of clipboard.clipboardConnections) {
+    const fromNode = newNodes[conn.fromIndex] as QueryNode | undefined;
+    const toNode = newNodes[conn.toIndex] as QueryNode | undefined;
+    if (fromNode !== undefined && toNode !== undefined) {
+      addConnection(fromNode, toNode, conn.portIndex);
     }
   }
 

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

@@ -175,36 +175,36 @@ describe('clipboard_operations', () => {
   });
 
   describe('pasteClipboardNodes', () => {
-    it('should return undefined when clipboard is empty', () => {
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes: undefined,
-      });
+    it('should return undefined when clipboard is undefined', () => {
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        undefined,
+      );
       expect(result).toBeUndefined();
     });
 
     it('should return undefined when clipboard has zero entries', () => {
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes: [],
-      });
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        {clipboardNodes: [], clipboardConnections: []},
+      );
       expect(result).toBeUndefined();
     });
 
     it('should append cloned nodes to rootNodes', () => {
       const existing = createMockNode({nodeId: 'existing'});
       const clipNode = createMockNode({nodeId: 'clip'});
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
-      ];
+      const clipboard = {
+        clipboardNodes: [
+          {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
 
-      const result = pasteClipboardNodes({
-        rootNodes: [existing],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-      });
+      const result = pasteClipboardNodes(
+        {rootNodes: [existing], nodeLayouts: new Map()},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       // Original node + pasted node
@@ -216,15 +216,17 @@ describe('clipboard_operations', () => {
 
     it('should select only the newly pasted nodes', () => {
       const clipNode = createMockNode({nodeId: 'clip'});
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
-      ];
+      const clipboard = {
+        clipboardNodes: [
+          {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
 
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-      });
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       expect(result?.selectedNodes.size).toBe(1);
@@ -235,15 +237,17 @@ describe('clipboard_operations', () => {
 
     it('should add layout positions for undocked nodes with offset', () => {
       const clipNode = createMockNode({nodeId: 'clip'});
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: clipNode, relativeX: 100, relativeY: 200, isDocked: false},
-      ];
+      const clipboard = {
+        clipboardNodes: [
+          {node: clipNode, relativeX: 100, relativeY: 200, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
 
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-      });
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       const pastedNodeId = result?.rootNodes[0].nodeId ?? '';
@@ -256,15 +260,17 @@ describe('clipboard_operations', () => {
 
     it('should not add layout for docked nodes', () => {
       const clipNode = createMockNode({nodeId: 'clip'});
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: clipNode, relativeX: 0, relativeY: 0, isDocked: true},
-      ];
+      const clipboard = {
+        clipboardNodes: [
+          {node: clipNode, relativeX: 0, relativeY: 0, isDocked: true},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
 
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-      });
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       const pastedNodeId = result?.rootNodes[0].nodeId ?? '';
@@ -283,21 +289,25 @@ describe('clipboard_operations', () => {
         sqlModules: mockSqlModules,
       });
 
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: realNode, relativeX: 0, relativeY: 0, isDocked: false},
-      ];
+      const clipboard = {
+        clipboardNodes: [
+          {node: realNode, relativeX: 0, relativeY: 0, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
 
-      const result1 = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-      });
+      const result1 = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        clipboard,
+      );
 
-      const result2 = pasteClipboardNodes({
-        rootNodes: result1?.rootNodes ?? [],
-        nodeLayouts: result1?.nodeLayouts ?? new Map(),
-        clipboardNodes,
-      });
+      const result2 = pasteClipboardNodes(
+        {
+          rootNodes: result1?.rootNodes ?? [],
+          nodeLayouts: result1?.nodeLayouts ?? new Map(),
+        },
+        clipboard,
+      );
 
       expect(result2).toBeDefined();
       expect(result2?.rootNodes).toHaveLength(2);
@@ -310,20 +320,18 @@ describe('clipboard_operations', () => {
     it('should restore connections between pasted nodes', () => {
       const parent = createMockNode({nodeId: 'p', type: NodeType.kTable});
       const child = createMockNode({nodeId: 'c', type: NodeType.kFilter});
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: parent, relativeX: 0, relativeY: 0, isDocked: false},
-        {node: child, relativeX: 0, relativeY: 100, isDocked: false},
-      ];
-      const clipboardConnections: ClipboardConnection[] = [
-        {fromIndex: 0, toIndex: 1},
-      ];
-
-      const result = pasteClipboardNodes({
-        rootNodes: [],
-        nodeLayouts: new Map(),
-        clipboardNodes,
-        clipboardConnections,
-      });
+      const clipboard = {
+        clipboardNodes: [
+          {node: parent, relativeX: 0, relativeY: 0, isDocked: false},
+          {node: child, relativeX: 0, relativeY: 100, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [{fromIndex: 0, toIndex: 1}],
+      };
+
+      const result = pasteClipboardNodes(
+        {rootNodes: [], nodeLayouts: new Map()},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       expect(result?.rootNodes).toHaveLength(2);
@@ -337,15 +345,17 @@ describe('clipboard_operations', () => {
       const existing = createMockNode({nodeId: 'existing'});
       const clipNode = createMockNode({nodeId: 'clip'});
       const existingLayouts = new Map([['existing', {x: 500, y: 600}]]);
-      const clipboardNodes: ClipboardEntry[] = [
-        {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
-      ];
-
-      const result = pasteClipboardNodes({
-        rootNodes: [existing],
-        nodeLayouts: existingLayouts,
-        clipboardNodes,
-      });
+      const clipboard = {
+        clipboardNodes: [
+          {node: clipNode, relativeX: 0, relativeY: 0, isDocked: false},
+        ] as ClipboardEntry[],
+        clipboardConnections: [] as ClipboardConnection[],
+      };
+
+      const result = pasteClipboardNodes(
+        {rootNodes: [existing], nodeLayouts: existingLayouts},
+        clipboard,
+      );
 
       expect(result).toBeDefined();
       expect(result?.nodeLayouts.get('existing')).toEqual({x: 500, y: 600});