code review changes

Author: jankuca

src/webviews/webview-side/sql-metadata-renderer/SqlMetadataRenderer.tsx

@@ -11,50 +11,50 @@ export interface SqlMetadataRendererProps {
     };
 }
 
-export const SqlMetadataRenderer = memo(function SqlMetadataRenderer({ data }: SqlMetadataRendererProps) {
-    const getStatusMessage = () => {
-        switch (data.status) {
-            case 'read_from_cache_success':
-                return {
-                    icon: '✓',
-                    text: 'Query result loaded from cache',
-                    color: 'var(--vscode-testing-iconPassed)'
-                };
-            case 'success_no_cache':
-                return {
-                    icon: 'ℹ',
-                    text: 'Query executed successfully',
-                    color: 'var(--vscode-notificationsInfoIcon-foreground)'
-                };
-            case 'cache_not_supported_for_query':
-                return {
-                    icon: 'ℹ',
-                    text: 'Caching not supported for this query type',
-                    color: 'var(--vscode-notificationsInfoIcon-foreground)'
-                };
-            default:
-                return {
-                    icon: 'ℹ',
-                    text: `Status: ${data.status}`,
-                    color: 'var(--vscode-foreground)'
-                };
-        }
-    };
+const getStatusMessage = (status: string) => {
+    switch (status) {
+        case 'read_from_cache_success':
+            return {
+                icon: '✓',
+                text: 'Query result loaded from cache',
+                color: 'var(--vscode-testing-iconPassed)'
+            };
+        case 'success_no_cache':
+            return {
+                icon: 'ℹ',
+                text: 'Query executed successfully',
+                color: 'var(--vscode-notificationsInfoIcon-foreground)'
+            };
+        case 'cache_not_supported_for_query':
+            return {
+                icon: 'ℹ',
+                text: 'Caching not supported for this query type',
+                color: 'var(--vscode-notificationsInfoIcon-foreground)'
+            };
+        default:
+            return {
+                icon: 'ℹ',
+                text: `Status: ${status}`,
+                color: 'var(--vscode-foreground)'
+            };
+    }
+};
 
-    const statusInfo = getStatusMessage();
+const formatBytes = (bytes: number) => {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(2)} KB`;
+    }
+    if (bytes < 1024 * 1024 * 1024) {
+        return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+    }
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+};
 
-    const formatBytes = (bytes: number) => {
-        if (bytes < 1024) {
-            return `${bytes} B`;
-        }
-        if (bytes < 1024 * 1024) {
-            return `${(bytes / 1024).toFixed(2)} KB`;
-        }
-        if (bytes < 1024 * 1024 * 1024) {
-            return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
-        }
-        return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-    };
+export const SqlMetadataRenderer = memo(function SqlMetadataRenderer({ data }: SqlMetadataRendererProps) {
+    const statusInfo = getStatusMessage(data.status);
 
     return (
         <div

src/webviews/webview-side/sql-metadata-renderer/index.ts

@@ -10,16 +10,16 @@ import { SqlMetadataRenderer } from './SqlMetadataRenderer';
  * query size, and other metadata.
  */
 export const activate: ActivationFunction = (_context: RendererContext<unknown>) => {
+    const roots = new Map<string, HTMLElement>();
+
     return {
         renderOutputItem(outputItem: OutputItem, element: HTMLElement) {
-            console.log(`SQL metadata renderer - rendering output item: ${outputItem.id}`);
             try {
                 const data = outputItem.json();
 
-                console.log(`SQL metadata renderer - received data:`, data);
-
                 const root = document.createElement('div');
                 element.appendChild(root);
+                roots.set(outputItem.id, root);
 
                 ReactDOM.render(React.createElement(SqlMetadataRenderer, { data }), root);
             } catch (error) {
@@ -32,8 +32,14 @@ export const activate: ActivationFunction = (_context: RendererContext<unknown>)
             }
         },
 
-        disposeOutputItem(_id?: string) {
-            // Cleanup if needed
+        disposeOutputItem(id?: string) {
+            if (id) {
+                const root = roots.get(id);
+                if (root) {
+                    ReactDOM.unmountComponentAtNode(root);
+                    roots.delete(id);
+                }
+            }
         }
     };
 };