feat: Implement deepnote big number chart support and renderer

build/esbuild/build.ts

@@ -287,6 +287,23 @@ async function buildAll() {
             ),
             { target: 'web', watch: watchAll }
         ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'dataframe-renderer', 'index.ts'),
+            path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'dataframeRenderer', 'dataframeRenderer.js'),
+            { target: 'web', watch: isWatchMode }
+        ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'chart-big-number-renderer', 'index.ts'),
+            path.join(
+                extensionFolder,
+                'dist',
+                'webviews',
+                'webview-side',
+                'chartBigNumberRenderer',
+                'chartBigNumberRenderer.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

@@ -1809,6 +1809,25 @@
                 "entrypoint": "./dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js"
             }
         ],
+        "notebookRenderer": [
+            {
+                "id": "deepnote-dataframe-renderer",
+                "displayName": "Deepnote Dataframe Renderer",
+                "entrypoint": "./dist/webviews/webview-side/dataframeRenderer/dataframeRenderer.js",
+                "mimeTypes": [
+                    "application/vnd.deepnote.dataframe.v3+json"
+                ],
+                "requiresMessaging": "optional"
+            },
+            {
+                "id": "deepnote-chart-big-number-renderer",
+                "displayName": "Deepnote Chart Big Number Renderer",
+                "entrypoint": "./dist/webviews/webview-side/chartBigNumberRenderer/chartBigNumberRenderer.js",
+                "mimeTypes": [
+                    "application/vnd.deepnote.chart.big-number+json"
+                ]
+            }
+        ],
         "viewsContainers": {
             "activitybar": [
                 {
@@ -2160,7 +2179,8 @@
         "vscode-tas-client": "^0.1.84",
         "ws": "^6.2.3",
         "zeromq": "^6.5.0",
-        "zeromqold": "npm:zeromq@^6.0.0-beta.6"
+        "zeromqold": "npm:zeromq@^6.0.0-beta.6",
+        "zod": "^4.1.12"
     },
     "devDependencies": {
         "@actions/core": "^1.11.1",

src/kernels/deepnote/deepnoteController.ts

@@ -0,0 +1,91 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+    CancellationToken,
+    NotebookCell,
+    NotebookCellExecution,
+    NotebookCellOutput,
+    NotebookCellOutputItem,
+    NotebookController
+} from 'vscode';
+
+import { KernelController } from '../kernelController';
+
+/**
+ * DeepnoteController extends KernelController to intercept cell execution
+ * and prepend initialization code to each cell execution.
+ */
+export class DeepnoteController extends KernelController {
+    constructor(controller: NotebookController) {
+        super(controller);
+    }
+
+    public override createNotebookCellExecution(cell: NotebookCell): NotebookCellExecution {
+        const execution = super.createNotebookCellExecution(cell);
+        return new DeepnoteNotebookCellExecution(execution, cell);
+    }
+}
+
+/**
+ * Wrapper around NotebookCellExecution that prepends initialization code.
+ * This is implemented by delegating all calls to the underlying execution object.
+ *
+ * Note: This wrapper currently just delegates to the underlying execution.
+ * The actual code interception will be implemented at the execution layer.
+ */
+class DeepnoteNotebookCellExecution implements NotebookCellExecution {
+    constructor(
+        private readonly execution: NotebookCellExecution,
+        public readonly cell: NotebookCell
+    ) {
+        // Prepend code will be: print("Hello world")
+        // This will be implemented at the CellExecution layer
+    }
+
+    get executionOrder(): number | undefined {
+        return this.execution.executionOrder;
+    }
+
+    set executionOrder(value: number | undefined) {
+        this.execution.executionOrder = value;
+    }
+
+    get token(): CancellationToken {
+        return this.execution.token;
+    }
+
+    public start(startTime?: number): void {
+        this.execution.start(startTime);
+    }
+
+    public end(success: boolean | undefined, endTime?: number): void {
+        this.execution.end(success, endTime);
+    }
+
+    public clearOutput(cell?: NotebookCell): Thenable<void> {
+        return this.execution.clearOutput(cell);
+    }
+
+    public replaceOutput(out: NotebookCellOutput | readonly NotebookCellOutput[], cell?: NotebookCell): Thenable<void> {
+        return this.execution.replaceOutput(out, cell);
+    }
+
+    public appendOutput(out: NotebookCellOutput | readonly NotebookCellOutput[], cell?: NotebookCell): Thenable<void> {
+        return this.execution.appendOutput(out, cell);
+    }
+
+    public replaceOutputItems(
+        items: NotebookCellOutputItem | readonly NotebookCellOutputItem[],
+        output: NotebookCellOutput
+    ): Thenable<void> {
+        return this.execution.replaceOutputItems(items, output);
+    }
+
+    public appendOutputItems(
+        items: NotebookCellOutputItem | readonly NotebookCellOutputItem[],
+        output: NotebookCellOutput
+    ): Thenable<void> {
+        return this.execution.appendOutputItems(items, output);
+    }
+}

src/kernels/execution/cellExecution.ts

@@ -406,6 +406,10 @@ export class CellExecution implements ICellExecution, IDisposable {
             return this.completedSuccessfully();
         }
 
+        // Prepend initialization code
+        const prependCode = 'print("Hello world")';
+        code = prependCode + '\n' + code;
+
         // Generate metadata from our cell (some kernels expect this.)
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const metadata: any = {

src/notebooks/controllers/vscodeNotebookController.ts

@@ -71,7 +71,7 @@ import { initializeInteractiveOrNotebookTelemetryBasedOnUserAction } from '../..
 import { NotebookCellLanguageService } from '../languages/cellLanguageService';
 import { IDataScienceErrorHandler } from '../../kernels/errors/types';
 import { ITrustedKernelPaths } from '../../kernels/raw/finder/types';
-import { KernelController } from '../../kernels/kernelController';
+import { DeepnoteController } from '../../kernels/deepnote/deepnoteController';
 import { RemoteKernelReconnectBusyIndicator } from './remoteKernelReconnectBusyIndicator';
 import { LastCellExecutionTracker } from '../../kernels/execution/lastCellExecutionTracker';
 import type { IAnyMessageArgs } from '@jupyterlab/services/lib/kernel/kernel';
@@ -548,7 +548,7 @@ export class VSCodeNotebookController implements Disposable, IVSCodeNotebookCont
         // Creating these execution objects marks the cell as queued for execution (vscode will update cell UI).
         type CellExec = { cell: NotebookCell; exec: NotebookCellExecution };
         const cellExecs: CellExec[] = (this.cellQueue.get(doc) || []).map((cell) => {
-            const exec = this.createCellExecutionIfNecessary(cell, new KernelController(this.controller));
+            const exec = this.createCellExecutionIfNecessary(cell, new DeepnoteController(this.controller));
             return { cell, exec };
         });
         this.cellQueue.delete(doc);
@@ -561,7 +561,7 @@ export class VSCodeNotebookController implements Disposable, IVSCodeNotebookCont
 
         // Connect to a matching kernel if possible (but user may pick a different one)
         let currentContext: 'start' | 'execution' = 'start';
-        let controller: IKernelController = new KernelController(this.controller);
+        let controller: IKernelController = new DeepnoteController(this.controller);
         const lastCellExecutionTracker = this.serviceContainer.get<LastCellExecutionTracker>(LastCellExecutionTracker);
         let kernel: IKernel | undefined;
         try {

src/notebooks/deepnote/converters/chartBigNumberBlockConverter.ts

@@ -0,0 +1,63 @@
+import { NotebookCellData, NotebookCellKind } from 'vscode';
+
+import type { BlockConverter } from './blockConverter';
+import type { DeepnoteBlock } from '../deepnoteTypes';
+import { DeepnoteBigNumberMetadataSchema } from '../deepnoteSchemas';
+import { parseJsonWithFallback } from '../dataConversionUtils';
+import { z } from 'zod';
+
+export const DEEPNOTE_VSCODE_RAW_CONTENT_KEY = 'deepnote_jupyter_raw_content';
+const DEFAULT_BIG_NUMBER_CONFIG = DeepnoteBigNumberMetadataSchema.parse({});
+
+export class ChartBigNumberBlockConverter implements BlockConverter {
+    applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        const config = DeepnoteBigNumberMetadataSchema.safeParse(parseJsonWithFallback(cell.value));
+
+        if (config.success !== true) {
+            block.metadata = {
+                ...block.metadata,
+                [DEEPNOTE_VSCODE_RAW_CONTENT_KEY]: cell.value
+            };
+            return;
+        }
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...config.data
+        };
+    }
+
+    canConvert(blockType: string): boolean {
+        return blockType.toLowerCase() === 'big-number';
+    }
+
+    convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const deepnoteJupyterRawContentResult = z.string().safeParse(block.metadata?.[DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
+        const deepnoteBigNumberMetadataResult = DeepnoteBigNumberMetadataSchema.safeParse(block.metadata);
+
+        if (deepnoteBigNumberMetadataResult.error != null) {
+            console.error('Error parsing deepnote big number metadata:', deepnoteBigNumberMetadataResult.error);
+            console.debug('Metadata:', JSON.stringify(block.metadata));
+        }
+
+        const configStr = deepnoteJupyterRawContentResult.success
+            ? deepnoteJupyterRawContentResult.data
+            : deepnoteBigNumberMetadataResult.success
+            ? JSON.stringify(deepnoteBigNumberMetadataResult.data, null, 2)
+            : JSON.stringify(DEFAULT_BIG_NUMBER_CONFIG);
+
+        const cell = new NotebookCellData(NotebookCellKind.Code, configStr, 'json');
+        console.log(cell);
+        return cell;
+    }
+
+    getSupportedTypes(): string[] {
+        return ['big-number'];
+    }
+}

src/notebooks/deepnote/dataConversionUtils.ts

@@ -2,6 +2,14 @@
  * Utility functions for Deepnote block ID and sorting key generation
  */
 
+export function parseJsonWithFallback(value: string, fallback?: unknown): unknown | null {
+    try {
+        return JSON.parse(value);
+    } catch (error) {
+        return fallback ?? null;
+    }
+}
+
 /**
  * Generate a random hex ID for blocks (32 character hex string)
  */

src/notebooks/deepnote/deepnoteConstants.ts

@@ -0,0 +1 @@
+export const CHART_BIG_NUMBER_MIME_TYPE = 'application/vnd.deepnote.chart.big-number+json';

src/notebooks/deepnote/deepnoteDataConverter.ts

@@ -1,12 +1,14 @@
 import { NotebookCellData, NotebookCellKind, NotebookCellOutput, NotebookCellOutputItem } from 'vscode';
 
-import type { DeepnoteBlock, DeepnoteOutput } from './deepnoteTypes';
 import { generateBlockId, generateSortingKey } from './dataConversionUtils';
+import type { DeepnoteBlock, DeepnoteOutput } from './deepnoteTypes';
 import { ConverterRegistry } from './converters/converterRegistry';
 import { CodeBlockConverter } from './converters/codeBlockConverter';
 import { addPocketToCellMetadata, createBlockFromPocket } from './pocket';
 import { TextBlockConverter } from './converters/textBlockConverter';
 import { MarkdownBlockConverter } from './converters/markdownBlockConverter';
+import { ChartBigNumberBlockConverter } from './converters/chartBigNumberBlockConverter';
+import { CHART_BIG_NUMBER_MIME_TYPE } from './deepnoteConstants';
 
 /**
  * Utility class for converting between Deepnote block structures and VS Code notebook cells.
@@ -19,6 +21,7 @@ export class DeepnoteDataConverter {
         this.registry.register(new CodeBlockConverter());
         this.registry.register(new TextBlockConverter());
         this.registry.register(new MarkdownBlockConverter());
+        this.registry.register(new ChartBigNumberBlockConverter());
     }
 
     /**
@@ -54,7 +57,7 @@ export class DeepnoteDataConverter {
             // The pocket is a place to tuck away Deepnote-specific fields for later.
             addPocketToCellMetadata(cell);
 
-            cell.outputs = this.transformOutputsForVsCode(block.outputs || []);
+            cell.outputs = this.transformOutputsForVsCode(block.type, block.outputs || []);
 
             return cell;
         });
@@ -202,7 +205,10 @@ export class DeepnoteDataConverter {
         });
     }
 
-    private transformOutputsForVsCode(outputs: DeepnoteOutput[]): NotebookCellOutput[] {
+    private transformOutputsForVsCode(
+        blockType: DeepnoteBlock['type'],
+        outputs: DeepnoteOutput[]
+    ): NotebookCellOutput[] {
         return outputs.map((output) => {
             if ('output_type' in output) {
                 if (output.output_type === 'error') {
@@ -269,7 +275,21 @@ export class DeepnoteDataConverter {
 
                         // Plain text as fallback (always last)
                         if (data['text/plain']) {
-                            items.push(NotebookCellOutputItem.text(data['text/plain'] as string));
+                            let mimeType = 'text/plain';
+                            if (blockType === 'big-number') {
+                                mimeType = CHART_BIG_NUMBER_MIME_TYPE;
+                            }
+                            items.push(NotebookCellOutputItem.text(data['text/plain'] as string, mimeType));
+                        }
+
+                        // Deepnote chart big number
+                        if (data[CHART_BIG_NUMBER_MIME_TYPE]) {
+                            items.push(
+                                NotebookCellOutputItem.text(
+                                    data[CHART_BIG_NUMBER_MIME_TYPE] as string,
+                                    CHART_BIG_NUMBER_MIME_TYPE
+                                )
+                            );
                         }
                     }
 

src/notebooks/deepnote/deepnoteSchemas.ts

@@ -0,0 +1,47 @@
+import { z } from 'zod';
+
+export const DeepnoteChartBigNumberOutputSchema = z.object({
+    title: z.string().nullish(),
+    value: z.string().nullish(),
+
+    comparisonTitle: z.string().nullish(),
+    comparisonValue: z.string().nullish()
+});
+
+export const DeepnoteBigNumberMetadataSchema = z.object({
+    deepnote_big_number_title: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_value: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_format: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_comparison_type: z
+        .enum(['absolute-value', 'percentage-change', 'absolute-change'])
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_comparison_title: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_comparison_value: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_comparison_format: z
+        .string()
+        .nullish()
+        .transform((val) => val ?? null),
+    deepnote_big_number_comparison_enabled: z
+        .boolean()
+        .nullish()
+        .transform((val) => val ?? null)
+});
+
+export type DeepnoteChartBigNumberOutput = z.infer<typeof DeepnoteChartBigNumberOutputSchema>;
+export type DeepnoteBigNumberMetadata = z.infer<typeof DeepnoteBigNumberMetadataSchema>;