feat(charts): Add visualization blocks support (#66)

Author: OlegWock

build/esbuild/build.ts

@@ -331,6 +331,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

@@ -1847,6 +1847,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": {
@@ -2162,12 +2171,14 @@
         "bootstrap-less": "^3.3.8",
         "clsx": "^2.1.1",
         "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",
         "fs-extra": "^4.0.3",
         "glob": "^7.1.2",
         "iconv-lite": "^0.6.3",
+        "immer": "^10.1.3",
         "inversify": "^6.0.1",
         "isomorphic-ws": "^4.0.1",
         "jquery": "^3.6.0",
@@ -2187,6 +2198,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",
@@ -2203,6 +2215,9 @@
         "tcp-port-used": "^1.0.1",
         "tmp": "^0.2.4",
         "url-parse": "^1.5.10",
+        "vega": "^5.33.0",
+        "vega-embed": "^6.25.0",
+        "vega-lite": "^5.21.0",
         "vscode-debugprotocol": "^1.41.0",
         "vscode-languageclient": "8.0.2-next.5",
         "vscode-tas-client": "^0.1.84",
@@ -2223,6 +2238,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,95 @@
+import { NotebookCellData, NotebookCellKind } from 'vscode';
+
+import type { BlockConverter } from './blockConverter';
+import type { DeepnoteBlock } from '../deepnoteTypes';
+
+type DataframeFilter = {
+    column: string;
+    operator:
+        | 'is-equal'
+        | 'is-not-equal'
+        | 'is-one-of'
+        | 'is-not-one-of'
+        | 'is-not-null'
+        | 'is-null'
+        | 'text-contains'
+        | 'text-does-not-contain'
+        | 'greater-than'
+        | 'greater-than-or-equal'
+        | 'less-than'
+        | 'less-than-or-equal'
+        | 'between'
+        | 'outside-of'
+        | 'is-relative-today'
+        | 'is-after'
+        | 'is-before'
+        | 'is-on';
+    comparativeValues: string[];
+};
+
+interface FilterMetadata {
+    /** @deprecated Use advancedFilters instead */
+    filter?: unknown;
+    advancedFilters?: DataframeFilter[];
+}
+
+interface VisualizationCellMetadata {
+    deepnote_variable_name?: string;
+    deepnote_visualization_spec?: Record<string, unknown>;
+    deepnote_chart_filter?: FilterMetadata;
+}
+
+/**
+ * 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 || '{}');
+
+            block.metadata = {
+                ...block.metadata,
+                deepnote_variable_name: config.variable || '',
+                deepnote_visualization_spec: config.spec || {},
+                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 metadata = block.metadata as VisualizationCellMetadata | undefined;
+        const variableName = metadata?.deepnote_variable_name || 'df';
+        const spec = metadata?.deepnote_visualization_spec || {};
+        const filters = metadata?.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, 'JSON');
+
+        return cell;
+    }
+
+    getSupportedTypes(): string[] {
+        return ['visualization'];
+    }
+}