feat(sync): Implement pixel highlight synchronization across panels

- Add functionality to sync pixel highlights between panels in the same group, enhancing user experience during visualizations.
- Introduce new methods in SyncManager to handle pixel highlight messages and update corresponding panels.
- Update webview content to support pixel highlight display and interaction, improving the visual feedback for users.
- Refactor existing logic to ensure smooth integration of pixel highlighting features without disrupting current functionalities.

Author: Zhiwen Dai

src/cvVariablesProvider.ts

@@ -34,6 +34,14 @@ function getColoredIcon(kind: 'mat' | 'pointcloud' | 'plot' | 'group', color: st
     return { light: iconUri, dark: iconUri };
 }
 
+function getColoredCircleIcon(color: string): { light: vscode.Uri, dark: vscode.Uri } {
+    // Create a simple filled circle SVG
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="6" fill="${color}"/></svg>`;
+    const base64 = Buffer.from(svg).toString('base64');
+    const iconUri = vscode.Uri.parse(`data:image/svg+xml;base64,${base64}`);
+    return { light: iconUri, dark: iconUri };
+}
+
 export class CVVariable extends vscode.TreeItem {
     public readonly isEmpty: boolean;
 
@@ -67,7 +75,14 @@ export class CVVariable extends vscode.TreeItem {
         const pointerIndicator = this.isPointer ? '→ ' : '';
         this.description = `${pointerIndicator}[${displaySize}]`;
 
-        if (isPaired && groupIndex !== undefined && kind !== 'plot') {
+        // For mat (image) variables, always use file-media icon regardless of pairing
+        if (kind === 'mat') {
+            this.iconPath = new vscode.ThemeIcon('file-media');
+            this.contextValue = isPaired 
+                ? `cvVariablePaired:${kind}${this.isEmpty ? ':empty' : ''}${this.isPointer ? ':pointer' : ''}`
+                : `cvVariable:${kind}${this.isEmpty ? ':empty' : ''}${this.isPointer ? ':pointer' : ''}`;
+        } else if (isPaired && groupIndex !== undefined && kind !== 'plot') {
+            // For pointcloud, use colored icon when paired
             const color = COLORS[groupIndex % COLORS.length];
             this.iconPath = getColoredIcon(kind, color);
             this.contextValue = `cvVariablePaired:${kind}${this.isEmpty ? ':empty' : ''}${this.isPointer ? ':pointer' : ''}`;
@@ -98,9 +113,9 @@ export class CVGroup extends vscode.TreeItem {
 
         if (groupIndex !== undefined) {
             const color = COLORS[groupIndex % COLORS.length];
-            this.iconPath = getColoredIcon('group', color);
+            this.iconPath = getColoredCircleIcon(color);
         } else {
-            this.iconPath = new vscode.ThemeIcon('symbol-group');
+            this.iconPath = new vscode.ThemeIcon('circle-filled');
         }
     }
 }

src/extension.ts

@@ -10,8 +10,13 @@ import { isPoint3Vector, isMat, is1DVector, isLikely1DMat, is1DSet, isMatx, is2D
 import { getMatInfoFromVariables } from "./matImage/matProvider";
 import { logDebug, logInfo, logError } from "./utils/logger";
 
-// Request deduplication: prevent multiple simultaneous requests for the same variable
-const pendingRequests = new Map<string, Promise<void>>();
+// Request management: cancel old requests when new ones arrive
+interface PendingRequest {
+  promise: Promise<void>;
+  cancel: () => void;
+  cancelled: boolean;
+}
+const pendingRequests = new Map<string, PendingRequest>();
 
 export function activate(context: vscode.ExtensionContext) {
   // Global safety nets to surface unexpected errors that may desync UI
@@ -143,7 +148,10 @@ export function activate(context: vscode.ExtensionContext) {
       const variables = cvVariablesProvider.getVariables();
       const options = variables
         .filter(v => v.name !== cvVar.name && v.kind === cvVar.kind)
-        .map(v => ({ label: v.name, description: v.type }));
+        .map(v => ({ 
+          label: v.name, 
+          description: v.sizeInfo ? `[${v.sizeInfo}]` : v.isEmpty ? '[empty]' : '' 
+        }));
 
       if (options.length === 0) {
         vscode.window.showInformationMessage(`No other ${cvVar.kind === 'mat' ? 'image' : 'point cloud'} variables found to pair with.`);
@@ -193,24 +201,34 @@ export function activate(context: vscode.ExtensionContext) {
       // This ensures pointer and its pointee share the same panel
       const panelVariableName = variable.name || variableName.replace(/^\(\*/, '').replace(/\)$/, '');
 
-      // Request deduplication: if already processing this variable, wait for it
+      // Request management: cancel old request if exists
       const requestKey = `${debugSession.id}:${panelVariableName}`;
-      if (pendingRequests.has(requestKey)) {
-        logDebug(`Request for ${panelVariableName} already in progress, waiting...`);
-        await pendingRequests.get(requestKey);
-        return;
+      const existingRequest = pendingRequests.get(requestKey);
+      if (existingRequest) {
+        logDebug(`Cancelling previous request for ${panelVariableName}`);
+        existingRequest.cancel();
+        existingRequest.cancelled = true;
       }
 
+      // Create cancellation state for this request
+      let isCancelled = false;
+      const cancellationCheck = () => isCancelled;
+      const cancel = () => { isCancelled = true; };
+      
       // Create promise for this request
       const requestPromise = (async () => {
         try {
-          await visualizeVariableInternal(variable, variableName, panelVariableName, isPointer, baseType, shouldForce, reveal, debugSession);
+          await visualizeVariableInternal(variable, variableName, panelVariableName, isPointer, baseType, shouldForce, reveal, debugSession, cancellationCheck);
         } finally {
-          pendingRequests.delete(requestKey);
+          // Only delete if this is still the current request
+          const current = pendingRequests.get(requestKey);
+          if (current && current.cancel === cancel) {
+            pendingRequests.delete(requestKey);
+          }
         }
       })();
 
-      pendingRequests.set(requestKey, requestPromise);
+      pendingRequests.set(requestKey, { promise: requestPromise, cancel, cancelled: false });
       await requestPromise;
 
     } catch (error: any) {
@@ -227,8 +245,14 @@ export function activate(context: vscode.ExtensionContext) {
     baseType: string,
     shouldForce: boolean,
     reveal: boolean,
-    debugSession: vscode.DebugSession
+    debugSession: vscode.DebugSession,
+    cancellationCheck?: () => boolean
   ) {
+    // Check if cancelled before starting
+    if (cancellationCheck && cancellationCheck()) {
+      logDebug(`Request for ${panelVariableName} was cancelled before starting`);
+      return;
+    }
     // Check if there's an existing panel for this variable that's being disposed
     // If so, skip this request to avoid triggering debug operations during cleanup
     const existingPanels = PanelManager.getAllPanels();

src/matImage/matProvider.ts

@@ -302,6 +302,8 @@ export async function drawMatImage(
         }
         if (message.command === 'viewChanged') {
           SyncManager.syncView(variableName, message.state);
+        } else if (message.command === 'pixelHighlight') {
+          SyncManager.syncPixelHighlight(variableName, message.pixelX, message.pixelY);
         } else if (message.command === 'reload') {
           const reloadStartTime = Date.now();
           console.log(`[DEBUG-TRACE] reload message received for ${variableName} at ${reloadStartTime}`);
@@ -764,6 +766,8 @@ export async function drawMatxImage(
       async (message) => {
         if (message.command === 'viewChanged') {
           SyncManager.syncView(variableName, message.state);
+        } else if (message.command === 'pixelHighlight') {
+          SyncManager.syncPixelHighlight(variableName, message.pixelX, message.pixelY);
         } else if (message.command === 'reload') {
           // Check if debug session is still active before reloading
           const currentSession = vscode.debug.activeDebugSession;
@@ -960,6 +964,8 @@ export async function draw2DStdArrayImage(
       async (message) => {
         if (message.command === 'viewChanged') {
           SyncManager.syncView(variableName, message.state);
+        } else if (message.command === 'pixelHighlight') {
+          SyncManager.syncPixelHighlight(variableName, message.pixelX, message.pixelY);
         } else if (message.command === 'reload') {
           // Check if debug session is still active before reloading
           const currentSession = vscode.debug.activeDebugSession;
@@ -1144,6 +1150,8 @@ export async function draw3DArrayImage(
       async (message) => {
         if (message.command === 'viewChanged') {
           SyncManager.syncView(panelName, message.state);
+        } else if (message.command === 'pixelHighlight') {
+          SyncManager.syncPixelHighlight(panelName, message.pixelX, message.pixelY);
         } 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

@@ -443,6 +443,14 @@ export function getWebviewContentForMat(
                             return;
                         }
                         applyViewState(state);
+                    } else if (message.command === 'setPixelHighlight') {
+                        // Receive pixel highlight from synced panel
+                        highlightPixelX = message.pixelX;
+                        highlightPixelY = message.pixelY;
+                        requestRender();
+                        
+                        // Update pixel info display for synced highlight
+                        updatePixelInfoForHighlight(message.pixelX, message.pixelY);
                     }
                 });
 
@@ -511,6 +519,12 @@ export function getWebviewContentForMat(
                 let pixelTextEnabled = true; // 可手动关掉
                 let renderQueued = false;
                 let isShuttingDown = false; // 面板即将关闭时阻断交互
+                
+                // Pixel highlight for synchronized viewing
+                let highlightPixelX = null;
+                let highlightPixelY = null;
+                let localHoverPixelX = null;
+                let localHoverPixelY = null;
 
                 // Make controls draggable
                 let controlsDragging = false;
@@ -1054,6 +1068,29 @@ export function getWebviewContentForMat(
                     return String(v | 0).padStart(3, ' ');
                 }
 
+                // Update pixel info display for synced highlight from other panels
+                function updatePixelInfoForHighlight(px, py) {
+                    if (px === null || py === null) {
+                        pixelInfo.textContent = '';
+                        return;
+                    }
+                    
+                    if (px >= 0 && px < cols && py >= 0 && py < rows) {
+                        const idx = (py * cols + px) * channels;
+                        let valStr = '';
+                        if (channels === 1) {
+                            valStr = formatValue(rawData[idx]);
+                        } else if (channels === 4) {
+                            valStr = \`R:\${formatValue(rawData[idx])} G:\${formatValue(rawData[idx+1])} B:\${formatValue(rawData[idx+2])} A:\${formatValue(rawData[idx+3])}\`;
+                        } else {
+                            valStr = \`R:\${formatValue(rawData[idx])} G:\${formatValue(rawData[idx+1])} B:\${formatValue(rawData[idx+2])}\`;
+                        }
+                        pixelInfo.textContent = \`(\${px}, \${py}) : \${valStr}\`;
+                    } else {
+                        pixelInfo.textContent = '';
+                    }
+                }
+
                 function updateCanvasSize() {
                     const containerRect = container.getBoundingClientRect();
                     const dpr = window.devicePixelRatio || 1;
@@ -1285,12 +1322,37 @@ export function getWebviewContentForMat(
                     drawGrid();
                     drawPixelTextOverlay();
                     
+                    // Draw pixel highlight (blue border) for synchronized viewing
+                    drawPixelHighlight();
+                    
                     // Update zoom level display
                     // Fixed-width zoom display: min 1 digit, max 5 digits, padded to 5 with spaces + 4 trailing spaces
                     const pct = Math.max(0, Math.round(scale * 100));
                     const pctStr = String(pct).slice(0, 5).padStart(5, ' ');
                     zoomLevelDisplay.textContent = pctStr + '%    ';
                 }
+                
+                // Draw pixel highlight with blue border (for synced panels)
+                function drawPixelHighlight() {
+                    // Use either synced highlight or local hover
+                    const px = highlightPixelX !== null ? highlightPixelX : localHoverPixelX;
+                    const py = highlightPixelY !== null ? highlightPixelY : localHoverPixelY;
+                    
+                    if (px === null || py === null) return;
+                    if (px < 0 || px >= cols || py < 0 || py >= rows) return;
+                    
+                    // Calculate screen position of the pixel
+                    const screenX = offsetX + px * scale;
+                    const screenY = offsetY + py * scale;
+                    const pixelSize = scale;
+                    
+                    // Draw blue border (2px thick)
+                    ctx.save();
+                    ctx.strokeStyle = '#00aaff';
+                    ctx.lineWidth = 2;
+                    ctx.strokeRect(screenX, screenY, pixelSize, pixelSize);
+                    ctx.restore();
+                }
 
                 function requestRender() {
                     if (renderQueued) return;
@@ -1537,8 +1599,37 @@ export function getWebviewContentForMat(
                             valStr = \`R:\${formatValue(rawData[idx])} G:\${formatValue(rawData[idx+1])} B:\${formatValue(rawData[idx+2])}\`;
                         }
                         pixelInfo.textContent = \`(\${imgX}, \${imgY}) : \${valStr}\`;
+                        
+                        // Update local hover pixel and send to sync
+                        if (localHoverPixelX !== imgX || localHoverPixelY !== imgY) {
+                            localHoverPixelX = imgX;
+                            localHoverPixelY = imgY;
+                            requestRender();
+                            // Send pixel highlight to synced panels
+                            if (!isShuttingDown && isInitialized) {
+                                vscode.postMessage({
+                                    command: 'pixelHighlight',
+                                    pixelX: imgX,
+                                    pixelY: imgY
+                                });
+                            }
+                        }
                     } else {
                         pixelInfo.textContent = '';
+                        // Clear local hover
+                        if (localHoverPixelX !== null || localHoverPixelY !== null) {
+                            localHoverPixelX = null;
+                            localHoverPixelY = null;
+                            requestRender();
+                            // Clear highlight on synced panels
+                            if (!isShuttingDown && isInitialized) {
+                                vscode.postMessage({
+                                    command: 'pixelHighlight',
+                                    pixelX: null,
+                                    pixelY: null
+                                });
+                            }
+                        }
                     }
                 });
 

src/plot/plotProvider.ts

@@ -998,7 +998,10 @@ export async function drawStdArrayPlot(
             return;
         }
 
-        panel.webview.html = getWebviewContentForPlot(panelName, initialData);
+        panel.webview.html = getWebviewContentForPlot(panelName);
+        
+        // Send ready signal immediately so webview knows this is not a moved panel
+        panel.webview.postMessage({ command: 'ready' });
 
         // Dispose old listener
         if ((panel as any)._messageListener) {
@@ -1133,6 +1136,24 @@ export async function drawStdArrayPlot(
             }
         });
 
+        // Send plot data via postMessage (better memory efficiency than embedding in HTML)
+        console.log(`[drawStdArrayPlot] Sending ${initialData.length} data points to webview via postMessage`);
+        
+        if ((panel as any)._isDisposing) {
+            console.log("[drawStdArrayPlot] Aborting final data send - panel is being disposed");
+            return;
+        }
+        
+        try {
+            panel.webview.postMessage({
+                command: 'completeData',
+                data: initialData
+            });
+        } catch (e) {
+            console.log("[drawStdArrayPlot] Final postMessage failed - panel likely disposed");
+            return;
+        }
+
     } catch (error: any) {
         vscode.window.showErrorMessage(`Failed to draw std::array plot: ${error.message}`);
         console.error(error);
@@ -1349,7 +1370,10 @@ export async function drawCStyleArrayPlot(
             return;
         }
 
-        panel.webview.html = getWebviewContentForPlot(panelName, initialData);
+        panel.webview.html = getWebviewContentForPlot(panelName);
+        
+        // Send ready signal immediately so webview knows this is not a moved panel
+        panel.webview.postMessage({ command: 'ready' });
 
         // Dispose old listener
         if ((panel as any)._messageListener) {
@@ -1483,6 +1507,24 @@ export async function drawCStyleArrayPlot(
             }
         });
 
+        // Send plot data via postMessage (better memory efficiency than embedding in HTML)
+        console.log(`[drawCStyleArrayPlot] Sending ${initialData.length} data points to webview via postMessage`);
+        
+        if ((panel as any)._isDisposing) {
+            console.log("[drawCStyleArrayPlot] Aborting final data send - panel is being disposed");
+            return;
+        }
+        
+        try {
+            panel.webview.postMessage({
+                command: 'completeData',
+                data: initialData
+            });
+        } catch (e) {
+            console.log("[drawCStyleArrayPlot] Final postMessage failed - panel likely disposed");
+            return;
+        }
+
     } catch (error: any) {
         vscode.window.showErrorMessage(`Failed to draw C-style array plot: ${error.message}`);
         console.error(error);