feat: Implement deepnote big number chart support and renderer

build/esbuild/build.ts

@@ -331,6 +331,18 @@ 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', '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', 'vega-renderer', 'index.ts'),
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'vegaRenderer', 'vegaRenderer.js'),

package.json

@@ -1848,6 +1848,15 @@
                 ],
                 "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"
+                ],
+                "requiresMessaging": "optional"
+            },
             {
                 "id": "deepnote-vega-renderer",
                 "displayName": "Deepnote Vega Chart Renderer",
@@ -2235,7 +2244,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/execution/cellExecution.ts

@@ -4,6 +4,7 @@
 import type * as KernelMessage from '@jupyterlab/services/lib/kernel/messages';
 import { NotebookCell, NotebookCellExecution, workspace, NotebookCellOutput } from 'vscode';
 
+import { createPythonCode } from '@deepnote/blocks';
 import type { Kernel } from '@jupyterlab/services';
 import { CellExecutionCreator } from './cellExecutionCreator';
 import { analyzeKernelErrors, createOutputWithErrorMessageForDisplay } from '../../platform/errors/errorUtils';
@@ -32,7 +33,6 @@ 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 { createPythonCode } from '@deepnote/blocks';
 import { DeepnoteDataConverter } from '../../notebooks/deepnote/deepnoteDataConverter';
 
 /**

src/kernels/execution/cellExecutionMessageHandler.ts

@@ -24,6 +24,7 @@ import {
     window,
     extensions
 } from 'vscode';
+import { coerce, SemVer } from 'semver';
 
 import type { Kernel } from '@jupyterlab/services';
 import { CellExecutionCreator } from './cellExecutionCreator';
@@ -45,7 +46,7 @@ import { handleTensorBoardDisplayDataOutput } from './executionHelpers';
 import { Identifiers, RendererExtension, WIDGET_MIMETYPE } from '../../platform/common/constants';
 import { CellOutputDisplayIdTracker } from './cellDisplayIdTracker';
 import { createDeferred } from '../../platform/common/utils/async';
-import { coerce, SemVer } from 'semver';
+import { CHART_BIG_NUMBER_MIME_TYPE } from '../../platform/deepnote/deepnoteConstants';
 
 // Helper interface for the set_next_input execute reply payload
 interface ISetNextInputPayload {
@@ -1181,6 +1182,15 @@ export class CellExecutionMessageHandler implements IDisposable {
         const output = translateCellDisplayOutput(
             new NotebookCellOutput(outputToBeUpdated.outputItems, outputToBeUpdated.outputContainer.metadata)
         );
+
+        const data = msg.content.data;
+        // deepnote-toolkit returns the text/plain mime type for big number outputs
+        // and for the custom renderer to be used, we need to return the application/vnd.deepnote.chart.big-number+json mime type
+        if (outputToBeUpdated.cell.metadata['__deepnotePocket']?.['type'] === 'big-number') {
+            data[CHART_BIG_NUMBER_MIME_TYPE] = data['text/plain'];
+            delete data['text/plain'];
+        }
+
         const newOutput = cellOutputToVSCCellOutput(
             {
                 ...output,

src/kernels/execution/helpers.ts

@@ -2,30 +2,32 @@
 // Licensed under the MIT License.
 
 import type * as nbformat from '@jupyterlab/nbformat';
-import { NotebookCellOutput, NotebookCellOutputItem, NotebookCell, Position, Range } from 'vscode';
+import { NotebookCell, NotebookCellOutput, NotebookCellOutputItem, Position, Range } from 'vscode';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 import type { KernelMessage } from '@jupyterlab/services';
 import fastDeepEqual from 'fast-deep-equal';
-import * as path from '../../platform/vscode-path/path';
-import * as uriPath from '../../platform/vscode-path/resources';
+import { Pocket } from '../../platform/deepnote/pocket';
 import { PYTHON_LANGUAGE } from '../../platform/common/constants';
 import { concatMultilineString, splitMultilineString } from '../../platform/common/utils';
+import { StopWatch } from '../../platform/common/utils/stopWatch';
+import { base64ToUint8Array, uint8ArrayToBase64 } from '../../platform/common/utils/string';
+import { CHART_BIG_NUMBER_MIME_TYPE } from '../../platform/deepnote/deepnoteConstants';
+import { getExtensionSpecificStack } from '../../platform/errors/errors';
+import { createOutputWithErrorMessageForDisplay } from '../../platform/errors/errorUtils';
+import { getCachedEnvironment, getVersion } from '../../platform/interpreter/helpers';
 import { logger } from '../../platform/logging';
+import type { NotebookCellExecutionState } from '../../platform/notebooks/cellExecutionStateService';
+import * as path from '../../platform/vscode-path/path';
+import * as uriPath from '../../platform/vscode-path/resources';
 import { sendTelemetryEvent, Telemetry } from '../../telemetry';
-import { createOutputWithErrorMessageForDisplay } from '../../platform/errors/errorUtils';
-import { CellExecutionCreator } from './cellExecutionCreator';
-import { IKernelController, KernelConnectionMetadata } from '../types';
 import {
-    isPythonKernelConnection,
     getInterpreterFromKernelConnectionMetadata,
-    kernelConnectionMetadataHasKernelModel,
-    getKernelRegistrationInfo
+    getKernelRegistrationInfo,
+    isPythonKernelConnection,
+    kernelConnectionMetadataHasKernelModel
 } from '../helpers';
-import { StopWatch } from '../../platform/common/utils/stopWatch';
-import { getExtensionSpecificStack } from '../../platform/errors/errors';
-import { getCachedEnvironment, getVersion } from '../../platform/interpreter/helpers';
-import { base64ToUint8Array, uint8ArrayToBase64 } from '../../platform/common/utils/string';
-import type { NotebookCellExecutionState } from '../../platform/notebooks/cellExecutionStateService';
+import { IKernelController, KernelConnectionMetadata } from '../types';
+import { CellExecutionCreator } from './cellExecutionCreator';
 
 export enum CellOutputMimeTypes {
     error = 'application/vnd.code.notebook.error',
@@ -260,6 +262,9 @@ function translateDisplayDataOutput(
         }
     }
     */
+    const deepnotePocket = cellMetadata?.__deepnotePocket as Pocket | undefined;
+    const deepnoteBlockType = deepnotePocket?.type;
+
     const metadata = getOutputMetadata(output, cellIndex, cellId, cellMetadata);
     // If we have SVG or PNG, then add special metadata to indicate whether to display `open plot`
     if ('image/svg+xml' in output.data || 'image/png' in output.data) {
@@ -269,7 +274,9 @@ function translateDisplayDataOutput(
     if (output.data) {
         // eslint-disable-next-line no-restricted-syntax
         for (const key in output.data) {
-            items.push(convertJupyterOutputToBuffer(key, output.data[key]));
+            // TODO - remove this once this is handled in the deepnote-toolkit
+            let effectiveKey = deepnoteBlockType === 'big-number' ? CHART_BIG_NUMBER_MIME_TYPE : key;
+            items.push(convertJupyterOutputToBuffer(effectiveKey, output.data[key] ?? output.data[effectiveKey]));
         }
     }
 

src/notebooks/deepnote/converters/blockConverter.ts

@@ -1,6 +1,6 @@
 import type { NotebookCellData } from 'vscode';
 
-import type { DeepnoteBlock } from '../deepnoteTypes';
+import type { DeepnoteBlock } from '../../../platform/deepnote/deepnoteTypes';
 
 export interface BlockConverter {
     applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void;

src/notebooks/deepnote/converters/chartBigNumberBlockConverter.ts

@@ -0,0 +1,64 @@
+import { NotebookCellData, NotebookCellKind } from 'vscode';
+import { z } from 'zod';
+
+import type { BlockConverter } from './blockConverter';
+import type { DeepnoteBlock } from '../../../platform/deepnote/deepnoteTypes';
+import { DeepnoteBigNumberMetadataSchema } from '../deepnoteSchemas';
+import { parseJsonWithFallback } from '../dataConversionUtils';
+import { DEEPNOTE_VSCODE_RAW_CONTENT_KEY } from './constants';
+
+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, null, 2);
+
+        const cell = new NotebookCellData(NotebookCellKind.Code, configStr, 'json');
+
+        return cell;
+    }
+
+    getSupportedTypes(): string[] {
+        return ['big-number'];
+    }
+}