feat(charts): Add visualization blocks support

Author: OlegWock

build/esbuild/build.ts

@@ -329,6 +329,11 @@ async function buildAll() {
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'dataframeRenderer', 'dataframeRenderer.js'),
             { target: 'web', watch: isWatchMode }
         ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'vega-renderer', 'index.ts'),
+            path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'vegaRenderer', 'vegaRenderer.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-lock.json

@@ -1818,6 +1818,15 @@
                     "application/vnd.deepnote.dataframe.v3+json"
                 ],
                 "requiresMessaging": "optional"
+            },
+            {
+                "id": "deepnote-vega-renderer",
+                "displayName": "Deepnote Vega Chart Renderer",
+                "entrypoint": "./dist/webviews/webview-side/vegaRenderer/vegaRenderer.js",
+                "mimeTypes": [
+                    "application/vnd.vega.v5+json"
+                ],
+                "requiresMessaging": "optional"
             }
         ],
         "viewsContainers": {
@@ -2126,6 +2135,7 @@
         "bootstrap": "^5.0.0",
         "bootstrap-less": "^3.3.8",
         "cross-fetch": "^3.1.5",
+        "d3-format": "^3.1.0",
         "encoding": "^0.1.13",
         "fast-deep-equal": "^2.0.1",
         "format-util": "^1.0.5",
@@ -2151,6 +2161,7 @@
         "react-redux": "^7.1.1",
         "react-svg-pan-zoom": "3.9.0",
         "react-svgmt": "1.1.11",
+        "react-vega": "^7.7.1",
         "react-virtualized": "^9.21.1",
         "redux": "^4.0.4",
         "redux-logger": "^3.0.6",
@@ -2166,6 +2177,7 @@
         "tcp-port-used": "^1.0.1",
         "tmp": "^0.2.4",
         "url-parse": "^1.5.10",
+        "vega-embed": "^7.1.0",
         "vscode-debugprotocol": "^1.41.0",
         "vscode-languageclient": "8.0.2-next.5",
         "vscode-tas-client": "^0.1.84",
@@ -2186,6 +2198,7 @@
         "@types/chai-arrays": "^2.0.1",
         "@types/chai-as-promised": "^7.1.6",
         "@types/cors": "^2.8.6",
+        "@types/d3-format": "^3.0.4",
         "@types/debug": "^4.1.5",
         "@types/dedent": "^0.7.0",
         "@types/del": "^4.0.0",

package.json

@@ -32,8 +32,8 @@ import { KernelError } from '../errors/kernelError';
 import { getCachedSysPrefix } from '../../platform/interpreter/helpers';
 import { getCellMetadata } from '../../platform/common/utils';
 import { NotebookCellExecutionState, notebookCellExecutions } from '../../platform/notebooks/cellExecutionStateService';
-import { createBlockFromPocket } from '../../notebooks/deepnote/pocket';
 import { createPythonCode } from '@deepnote/blocks';
+import { DeepnoteDataConverter } from '../../notebooks/deepnote/deepnoteDataConverter';
 
 /**
  * Factory for CellExecution objects.
@@ -416,10 +416,11 @@ export class CellExecution implements ICellExecution, IDisposable {
             metadata: this.cell.metadata,
             outputs: [...(this.cell.outputs || [])]
         };
-        const deepnoteBlock = createBlockFromPocket(cellData, this.cell.index);
 
-        // Use createPythonCode to generate code with table state already included
-        logger.info(`Cell ${this.cell.index}: Using createPythonCode to generate execution code with table state`);
+        const dataConverter = new DeepnoteDataConverter();
+        const deepnoteBlock = dataConverter.convertCellToBlock(cellData, this.cell.index);
+
+        logger.info(`Cell ${this.cell.index}: Using createPythonCode for ${deepnoteBlock.type} block`);
         code = createPythonCode(deepnoteBlock);
 
         // Generate metadata from our cell (some kernels expect this.)

src/kernels/execution/cellExecution.ts

@@ -0,0 +1,68 @@
+import { NotebookCellData, NotebookCellKind } from 'vscode';
+
+import type { BlockConverter } from './blockConverter';
+import type { DeepnoteBlock } from '../deepnoteTypes';
+
+/**
+ * Converter for Deepnote visualization blocks (chart blocks).
+ * Displays blocks as editable JSON with variable name, spec, and filters.
+ * The JSON is converted to Python code at execution time.
+ */
+export class VisualizationBlockConverter implements BlockConverter {
+    applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Parse the JSON from the cell to update metadata
+        try {
+            const config = JSON.parse(cell.value || '{}');
+
+            if (!block.metadata) {
+                block.metadata = {};
+            }
+
+            if (config.variable) {
+                block.metadata.deepnote_variable_name = config.variable;
+            }
+
+            if (config.spec) {
+                block.metadata.deepnote_visualization_spec = config.spec;
+            }
+
+            if (config.filters) {
+                if (!block.metadata.deepnote_chart_filter) {
+                    block.metadata.deepnote_chart_filter = {};
+                }
+                block.metadata.deepnote_chart_filter.advancedFilters = config.filters;
+            }
+        } catch (error) {
+            // If JSON parsing fails, leave metadata unchanged
+            console.warn('Failed to parse visualization JSON:', error);
+        }
+    }
+
+    canConvert(blockType: string): boolean {
+        return blockType.toLowerCase() === 'visualization';
+    }
+
+    convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const variableName = (block.metadata as any)?.deepnote_variable_name || 'df';
+        const spec = (block.metadata as any)?.deepnote_visualization_spec || {};
+        const filters = (block.metadata as any)?.deepnote_chart_filter?.advancedFilters || [];
+
+        // Create a clean JSON representation that users can edit
+        const config = {
+            variable: variableName,
+            spec: spec,
+            filters: filters
+        };
+
+        const jsonContent = JSON.stringify(config, null, 2);
+        const cell = new NotebookCellData(NotebookCellKind.Code, jsonContent, 'python');
+
+        return cell;
+    }
+
+    getSupportedTypes(): string[] {
+        return ['visualization'];
+    }
+}