fix(sync): Implement webview state restoration on readiness

- Add a new command 'webviewReady' to notify when the webview is ready to receive state updates.
- Implement the `restoreState` method in SyncManager to handle state restoration for webviews, enhancing synchronization across different visualizations.
- Update draw functions to log and restore state upon receiving the 'webviewReady' command, improving user experience during panel interactions.

Author: dull-bird

src/matImage/matProvider.ts

@@ -304,6 +304,9 @@ export async function drawMatImage(
           SyncManager.syncView(panelName, message.state);
         } else if (message.command === 'pixelHighlight') {
           SyncManager.syncPixelHighlight(panelName, message.pixelX, message.pixelY);
+        } else if (message.command === 'webviewReady') {
+          console.log(`[DEBUG-TRACE] webviewReady received for ${panelName}, restoring state`);
+          SyncManager.restoreState(panelName);
         } else if (message.command === 'reload') {
           const reloadStartTime = Date.now();
           console.log(`[DEBUG-TRACE] reload message received for ${variableName} at ${reloadStartTime}`);
@@ -768,6 +771,9 @@ export async function drawMatxImage(
           SyncManager.syncView(panelName, message.state);
         } else if (message.command === 'pixelHighlight') {
           SyncManager.syncPixelHighlight(panelName, message.pixelX, message.pixelY);
+        } else if (message.command === 'webviewReady') {
+          console.log(`[DEBUG-TRACE] webviewReady received for Matx ${panelName}, restoring state`);
+          SyncManager.restoreState(panelName);
         } else if (message.command === 'reload') {
           // Check if debug session is still active before reloading
           const currentSession = vscode.debug.activeDebugSession;
@@ -966,6 +972,9 @@ export async function draw2DStdArrayImage(
           SyncManager.syncView(panelName, message.state);
         } else if (message.command === 'pixelHighlight') {
           SyncManager.syncPixelHighlight(panelName, message.pixelX, message.pixelY);
+        } else if (message.command === 'webviewReady') {
+          console.log(`[DEBUG-TRACE] webviewReady received for 2D array ${panelName}, restoring state`);
+          SyncManager.restoreState(panelName);
         } else if (message.command === 'reload') {
           // Check if debug session is still active before reloading
           const currentSession = vscode.debug.activeDebugSession;
@@ -1152,6 +1161,9 @@ export async function draw3DArrayImage(
           SyncManager.syncView(panelName, message.state);
         } else if (message.command === 'pixelHighlight') {
           SyncManager.syncPixelHighlight(panelName, message.pixelX, message.pixelY);
+        } else if (message.command === 'webviewReady') {
+          console.log(`[DEBUG-TRACE] webviewReady received for 3D array ${panelName}, restoring state`);
+          SyncManager.restoreState(panelName);
         } else if (message.command === 'reload') {
           const reloadStartTime = Date.now();
           console.log(`[DEBUG-TRACE] 3D array reload message received for ${panelName} at ${reloadStartTime}`);

src/matImage/matWebview.ts

@@ -592,6 +592,9 @@ export function getWebviewContentForMat(
                     isInitialized = true;
                     requestRender();
                     updateJetColorbarVisibility();
+                    
+                    // Notify extension that webview is ready to receive sync state
+                    vscode.postMessage({ command: 'webviewReady' });
                 }
 
                 function clampByte(v) {

src/utils/syncManager.ts

@@ -208,6 +208,45 @@ export class SyncManager {
         }
     }
 
+    /**
+     * Restore the synchronized state for a specific variable's webview.
+     * This is called when a webview signals it's ready to receive state updates.
+     * @param variableName The variable name to restore state for
+     */
+    static restoreState(variableName: string) {
+        const panel = this.panels.get(variableName);
+        if (!panel) {
+            console.log(`[SyncManager] restoreState: panel for ${variableName} not found`);
+            return;
+        }
+
+        const groupId = this.variableToGroup.get(variableName);
+        if (groupId) {
+            const state = this.groupStates.get(groupId);
+            if (state) {
+                console.log(`[SyncManager] restoreState: sending group state to ${variableName}`);
+                panel.webview.postMessage({
+                    command: 'setView',
+                    state: state
+                });
+                this.variableHasSynced.add(variableName);
+                return;
+            }
+        }
+
+        // Not in a group, but might have a saved state from previous panel
+        const savedState = this.variableStates.get(variableName);
+        if (savedState) {
+            console.log(`[SyncManager] restoreState: sending saved state to ${variableName}`);
+            panel.webview.postMessage({
+                command: 'setView',
+                state: savedState
+            });
+        } else {
+            console.log(`[SyncManager] restoreState: no state found for ${variableName}`);
+        }
+    }
+
     static getGroupIndex(varName: string): number | undefined {
         const groupId = this.variableToGroup.get(varName);
         return groupId ? this.groupToIndex.get(groupId) : undefined;