Clear previous layout when applying portable layout to tab (#382)

frontend/layout/lib/layoutModel.ts

@@ -8,6 +8,7 @@ import { createRef, CSSProperties } from "react";
 import { debounce } from "throttle-debounce";
 import { balanceNode, findNode, newLayoutNode, walkNodes } from "./layoutNode";
 import {
+    clearTree,
     computeMoveNode,
     deleteNode,
     focusNode,
@@ -25,6 +26,7 @@ import {
     LayoutNodeAdditionalProps,
     LayoutTreeAction,
     LayoutTreeActionType,
+    LayoutTreeClearTreeAction,
     LayoutTreeComputeMoveNodeAction,
     LayoutTreeDeleteNodeAction,
     LayoutTreeFocusNodeAction,
@@ -354,6 +356,9 @@ export class LayoutModel {
             case LayoutTreeActionType.MagnifyNodeToggle:
                 magnifyNodeToggle(this.treeState, action as LayoutTreeMagnifyNodeToggleAction);
                 break;
+            case LayoutTreeActionType.ClearTree: {
+                clearTree(this.treeState);
+            }
             default:
                 console.error("Invalid reducer action", this.treeState, action);
         }
@@ -431,6 +436,11 @@ export class LayoutModel {
                             this.treeReducer(insertAction);
                             break;
                         }
+                        case LayoutTreeActionType.ClearTree: {
+                            this.treeReducer({
+                                type: LayoutTreeActionType.ClearTree,
+                            } as LayoutTreeClearTreeAction);
+                        }
                         default:
                             console.warn("unsupported layout action", action);
                             break;

frontend/layout/lib/layoutTree.ts

@@ -417,3 +417,11 @@ export function magnifyNodeToggle(layoutState: LayoutTreeState, action: LayoutTr
     }
     layoutState.generation++;
 }
+
+export function clearTree(layoutState: LayoutTreeState) {
+    layoutState.rootNode = undefined;
+    layoutState.leafOrder = undefined;
+    layoutState.focusedNodeId = undefined;
+    layoutState.magnifiedNodeId = undefined;
+    layoutState.generation++;
+}

frontend/layout/lib/types.ts

@@ -69,6 +69,7 @@ export enum LayoutTreeActionType {
     DeleteNode = "delete",
     FocusNode = "focus",
     MagnifyNodeToggle = "magnify",
+    ClearTree = "clear",
 }
 
 /**
@@ -236,6 +237,13 @@ export interface LayoutTreeMagnifyNodeToggleAction extends LayoutTreeAction {
     nodeId: string;
 }
 
+/**
+ * Action for clearing all nodes from the layout tree.
+ */
+export interface LayoutTreeClearTreeAction extends LayoutTreeAction {
+    type: LayoutTreeActionType.ClearTree;
+}
+
 /**
  * Represents a single node in the layout tree.
  */

pkg/wlayout/wlayout.go

@@ -18,6 +18,7 @@ const (
 	LayoutActionDataType_Insert        = "insert"
 	LayoutActionDataType_InsertAtIndex = "insertatindex"
 	LayoutActionDataType_Remove        = "delete"
+	LayoutActionDataType_ClearTree     = "clear"
 )
 
 type PortableLayout []struct {
@@ -119,7 +120,8 @@ func QueueLayoutActionForTab(ctx context.Context, tabId string, actions ...waveo
 }
 
 func ApplyPortableLayout(ctx context.Context, tabId string, layout PortableLayout) error {
-	actions := make([]waveobj.LayoutActionData, len(layout))
+	actions := make([]waveobj.LayoutActionData, len(layout)+1)
+	actions[0] = waveobj.LayoutActionData{ActionType: LayoutActionDataType_ClearTree}
 	for i := 0; i < len(layout); i++ {
 		layoutAction := layout[i]
 
@@ -128,7 +130,7 @@ func ApplyPortableLayout(ctx context.Context, tabId string, layout PortableLayou
 			return fmt.Errorf("unable to create block to apply portable layout to tab %s: %w", tabId, err)
 		}
 
-		actions[i] = waveobj.LayoutActionData{
+		actions[i+1] = waveobj.LayoutActionData{
 			ActionType: LayoutActionDataType_InsertAtIndex,
 			BlockId:    blockData.OID,
 			IndexArr:   &layoutAction.IndexArr,