feat: add sql metadata output renderer

Author: jankuca

build/esbuild/build.ts

@@ -336,6 +336,18 @@ async function buildAll() {
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'vegaRenderer', 'vegaRenderer.js'),
             { target: 'web', watch: isWatchMode }
         ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'sql-metadata-renderer', 'index.ts'),
+            path.join(
+                extensionFolder,
+                'dist',
+                'webviews',
+                'webview-side',
+                'sqlMetadataRenderer',
+                'sqlMetadataRenderer.js'
+            ),
+            { target: 'web', watch: isWatchMode }
+        ),
         build(
             path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'variable-view', 'index.tsx'),
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'viewers', 'variableView.js'),

package.json

@@ -1856,6 +1856,15 @@
                     "application/vnd.vega.v5+json"
                 ],
                 "requiresMessaging": "optional"
+            },
+            {
+                "id": "deepnote-sql-metadata-renderer",
+                "displayName": "Deepnote SQL Metadata Renderer",
+                "entrypoint": "./dist/webviews/webview-side/sqlMetadataRenderer/sqlMetadataRenderer.js",
+                "mimeTypes": [
+                    "application/vnd.deepnote.sql-output-metadata+json"
+                ],
+                "requiresMessaging": "optional"
             }
         ],
         "viewsContainers": {

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

@@ -0,0 +1,96 @@
+import React, { memo } from 'react';
+
+export interface SqlMetadataRendererProps {
+    data: {
+        cache_created_at?: string;
+        compiled_query?: string;
+        integration_id?: string;
+        size_in_bytes?: number;
+        status: string;
+        variable_type?: string;
+    };
+}
+
+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 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`;
+    };
+
+    return (
+        <div
+            style={{
+                padding: '8px 12px',
+                margin: '4px 0',
+                borderLeft: `3px solid ${statusInfo.color}`,
+                backgroundColor: 'var(--vscode-textBlockQuote-background)',
+                fontSize: '12px',
+                fontFamily: 'var(--vscode-font-family)',
+                color: 'var(--vscode-foreground)'
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    marginBottom: data.cache_created_at || data.size_in_bytes ? '6px' : '0'
+                }}
+            >
+                <span style={{ color: statusInfo.color, fontSize: '14px', fontWeight: 'bold' }}>{statusInfo.icon}</span>
+                <span style={{ fontWeight: 500 }}>{statusInfo.text}</span>
+            </div>
+
+            {data.cache_created_at && (
+                <div style={{ marginLeft: '22px', opacity: 0.8, fontSize: '11px' }}>
+                    Cache created: {new Date(data.cache_created_at).toLocaleString()}
+                </div>
+            )}
+
+            {data.size_in_bytes !== undefined && (
+                <div style={{ marginLeft: '22px', opacity: 0.8, fontSize: '11px' }}>
+                    Result size: {formatBytes(data.size_in_bytes)}
+                </div>
+            )}
+        </div>
+    );
+});

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

@@ -0,0 +1,39 @@
+import type { ActivationFunction, OutputItem, RendererContext } from 'vscode-notebook-renderer';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { SqlMetadataRenderer } from './SqlMetadataRenderer';
+
+/**
+ * Renderer for SQL metadata output (application/vnd.deepnote.sql-output-metadata+json).
+ * This renderer displays information about SQL query execution, including cache status,
+ * query size, and other metadata.
+ */
+export const activate: ActivationFunction = (_context: RendererContext<unknown>) => {
+    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);
+
+                ReactDOM.render(React.createElement(SqlMetadataRenderer, { data }), root);
+            } catch (error) {
+                console.error(`Error rendering SQL metadata: ${error}`);
+                const errorDiv = document.createElement('div');
+                errorDiv.style.padding = '10px';
+                errorDiv.style.color = 'var(--vscode-errorForeground)';
+                errorDiv.textContent = `Error rendering SQL metadata: ${error}`;
+                element.appendChild(errorDiv);
+            }
+        },
+
+        disposeOutputItem(_id?: string) {
+            // Cleanup if needed
+        }
+    };
+};