Merge remote-tracking branch 'origin/tomaskislan/grn-4762-support-big-number-blocks' into tomaskislan/grn-4776-support-input-blocks

tkislan · tkislan · commit 4c1c4e227785 · 2025-10-17T16:17:56.000Z
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -74,7 +74,7 @@ module.exports = {
         'import/no-unresolved': [
             'error',
             {
-                ignore: ['monaco-editor', 'vscode']
+                ignore: ['monaco-editor', 'vscode', 'error-boundary']
             }
         ],
         'import/prefer-default-export': 'off',
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2204,6 +2204,7 @@
         "react": "^16.5.2",
         "react-data-grid": "^6.0.2-0",
         "react-dom": "^16.5.2",
+        "react-error-boundary": "^6.0.0",
         "react-redux": "^7.1.1",
         "react-svg-pan-zoom": "3.9.0",
         "react-svgmt": "1.1.11",
diff --git a/src/kernels/execution/cellExecutionMessageHandler.ts b/src/kernels/execution/cellExecutionMessageHandler.ts
@@ -1184,6 +1184,8 @@ export class CellExecutionMessageHandler implements IDisposable {
         );
 
         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'];
diff --git a/src/kernels/execution/helpers.ts b/src/kernels/execution/helpers.ts
@@ -262,7 +262,6 @@ function translateDisplayDataOutput(
         }
     }
     */
-    // TODO - add DeepnotePocket zod schema validation
     const deepnotePocket = cellMetadata?.__deepnotePocket as Pocket | undefined;
     const deepnoteBlockType = deepnotePocket?.type;
 
diff --git a/src/notebooks/deepnote/converters/chartBigNumberBlockConverter.unit.test.ts b/src/notebooks/deepnote/converters/chartBigNumberBlockConverter.unit.test.ts
@@ -268,14 +268,14 @@ suite('ChartBigNumberBlockConverter', () => {
 
             const config = JSON.parse(cell.value);
             assert.deepStrictEqual(config, {
-                deepnote_big_number_title: null,
-                deepnote_big_number_value: null,
-                deepnote_big_number_format: null,
-                deepnote_big_number_comparison_type: null,
-                deepnote_big_number_comparison_title: null,
-                deepnote_big_number_comparison_value: null,
-                deepnote_big_number_comparison_format: null,
-                deepnote_big_number_comparison_enabled: null
+                deepnote_big_number_title: '',
+                deepnote_big_number_value: '',
+                deepnote_big_number_format: 'number',
+                deepnote_big_number_comparison_type: '',
+                deepnote_big_number_comparison_title: '',
+                deepnote_big_number_comparison_value: '',
+                deepnote_big_number_comparison_format: '',
+                deepnote_big_number_comparison_enabled: false
             });
         });
 
@@ -296,14 +296,14 @@ suite('ChartBigNumberBlockConverter', () => {
 
             const config = JSON.parse(cell.value);
             assert.deepStrictEqual(config, {
-                deepnote_big_number_title: null,
-                deepnote_big_number_value: null,
-                deepnote_big_number_format: null,
-                deepnote_big_number_comparison_type: null,
-                deepnote_big_number_comparison_title: null,
-                deepnote_big_number_comparison_value: null,
-                deepnote_big_number_comparison_format: null,
-                deepnote_big_number_comparison_enabled: null
+                deepnote_big_number_title: '',
+                deepnote_big_number_value: '',
+                deepnote_big_number_format: 'number',
+                deepnote_big_number_comparison_type: '',
+                deepnote_big_number_comparison_title: '',
+                deepnote_big_number_comparison_value: '',
+                deepnote_big_number_comparison_format: '',
+                deepnote_big_number_comparison_enabled: false
             });
         });
     });
@@ -445,13 +445,13 @@ suite('ChartBigNumberBlockConverter', () => {
                 metadata: {
                     custom: 'value',
                     deepnote_big_number_title: 'new title',
-                    deepnote_big_number_comparison_enabled: null,
-                    deepnote_big_number_comparison_format: null,
-                    deepnote_big_number_comparison_title: null,
-                    deepnote_big_number_comparison_type: null,
-                    deepnote_big_number_comparison_value: null,
-                    deepnote_big_number_format: null,
-                    deepnote_big_number_value: null
+                    deepnote_big_number_comparison_enabled: false,
+                    deepnote_big_number_comparison_format: '',
+                    deepnote_big_number_comparison_title: '',
+                    deepnote_big_number_comparison_type: '',
+                    deepnote_big_number_comparison_value: '',
+                    deepnote_big_number_format: 'number',
+                    deepnote_big_number_value: ''
                 },
                 outputs: [],
                 sortingKey: 'a0',
diff --git a/src/notebooks/deepnote/deepnoteDataConverter.ts b/src/notebooks/deepnote/deepnoteDataConverter.ts
@@ -378,9 +378,10 @@ export class DeepnoteDataConverter {
                             );
                         }
 
-                        // Plain text as fallback (always last)
                         if (data['text/plain']) {
                             let mimeType = 'text/plain';
+                            // 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 (blockType === 'big-number' && !(CHART_BIG_NUMBER_MIME_TYPE in data)) {
                                 mimeType = CHART_BIG_NUMBER_MIME_TYPE;
                             }
diff --git a/src/notebooks/deepnote/deepnoteSchemas.ts b/src/notebooks/deepnote/deepnoteSchemas.ts
@@ -12,35 +12,35 @@ export const DeepnoteBigNumberMetadataSchema = z.object({
     deepnote_big_number_title: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_value: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_format: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? 'number'),
     deepnote_big_number_comparison_type: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_comparison_title: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_comparison_value: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_comparison_format: z
         .string()
         .nullish()
-        .transform((val) => val ?? null),
+        .transform((val) => val ?? ''),
     deepnote_big_number_comparison_enabled: z
         .boolean()
         .nullish()
-        .transform((val) => val ?? null)
+        .transform((val) => val ?? false)
 });
 
 export const DeepnoteTextInputMetadataSchema = z.object({
diff --git a/src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRenderer.tsx b/src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRenderer.tsx
@@ -9,7 +9,6 @@ export function ChartBigNumberOutputRenderer({
     output: DeepnoteChartBigNumberOutput;
     metadata: DeepnoteBigNumberMetadata;
 }) {
-    // TODO: either remove or handle here .. currently handled in the parent
     const title = useMemo(() => {
         return output.title || 'Title';
     }, [output.title]);
diff --git a/src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRendererContainer.tsx b/src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRendererContainer.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import {
+    DeepnoteBigNumberMetadataSchema,
+    DeepnoteChartBigNumberOutputSchema
+} from '../../../notebooks/deepnote/deepnoteSchemas';
+import { ChartBigNumberOutputRenderer } from './ChartBigNumberOutputRenderer';
+
+export function ChartBigNumberOutputRendererContainer({
+    outputText,
+    outputMetadata
+}: {
+    outputText: string;
+    outputMetadata: unknown;
+}) {
+    // Remove single quotes from start and end of string if present
+    const data = JSON.parse(outputText.replace(/^'|'$/g, ''));
+    const blockMetadata = DeepnoteBigNumberMetadataSchema.parse(outputMetadata);
+
+    const chartBigNumberOutput = DeepnoteChartBigNumberOutputSchema.parse(data);
+
+    return <ChartBigNumberOutputRenderer output={chartBigNumberOutput} metadata={blockMetadata} />;
+}
diff --git a/src/webviews/webview-side/chart-big-number-renderer/ErrorBoundary.tsx b/src/webviews/webview-side/chart-big-number-renderer/ErrorBoundary.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { FallbackProps } from 'react-error-boundary';
+
+export function ErrorFallback({ error }: FallbackProps) {
+    return (
+        <div
+            style={{
+                padding: '16px',
+                color: 'var(--vscode-errorForeground)',
+                backgroundColor: 'var(--vscode-inputValidation-errorBackground)',
+                border: '1px solid var(--vscode-inputValidation-errorBorder)',
+                borderRadius: '4px',
+                fontFamily: 'var(--vscode-font-family)',
+                fontSize: '13px'
+            }}
+        >
+            <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Error rendering big number</div>
+            <div style={{ marginBottom: '8px' }}>{error.message}</div>
+            <details style={{ marginTop: '8px', cursor: 'pointer' }}>
+                <summary>Stack trace</summary>
+                <pre
+                    style={{
+                        marginTop: '8px',
+                        padding: '8px',
+                        backgroundColor: 'var(--vscode-editor-background)',
+                        overflow: 'auto',
+                        fontSize: '11px',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word'
+                    }}
+                >
+                    {error.stack}
+                </pre>
+            </details>
+        </div>
+    );
+}
diff --git a/src/webviews/webview-side/chart-big-number-renderer/index.ts b/src/webviews/webview-side/chart-big-number-renderer/index.ts
@@ -2,40 +2,33 @@ import './styles.css';
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import type { ActivationFunction, OutputItem, RendererContext } from 'vscode-notebook-renderer';
 
-import { ChartBigNumberOutputRenderer } from './ChartBigNumberOutputRenderer';
-import {
-    DeepnoteBigNumberMetadataSchema,
-    DeepnoteChartBigNumberOutputSchema
-} from '../../../notebooks/deepnote/deepnoteSchemas';
+import { ErrorFallback } from './ErrorBoundary';
+
+import { ChartBigNumberOutputRendererContainer } from './ChartBigNumberOutputRendererContainer';
 
 export const activate: ActivationFunction = (_context: RendererContext<unknown>) => {
     return {
         renderOutputItem(outputItem: OutputItem, element: HTMLElement) {
-            try {
-                // Remove single quotes from start and end of string if present
-                const data = JSON.parse(outputItem.text().replace(/^'|'$/g, ''));
-                const blockMetadata = DeepnoteBigNumberMetadataSchema.parse(outputItem.metadata);
-
-                const chartBigNumberOutput = DeepnoteChartBigNumberOutputSchema.parse(data);
-
-                ReactDOM.render(
-                    React.createElement(ChartBigNumberOutputRenderer, {
-                        output: chartBigNumberOutput,
-                        metadata: blockMetadata
-                    }),
-                    element
-                );
-            } catch (error) {
-                console.error('Error rendering chart big number:', error);
-                const errorDiv = document.createElement('div');
-                errorDiv.style.padding = '10px';
-                errorDiv.style.color = 'var(--vscode-errorForeground)';
-                errorDiv.textContent = `Error rendering chart big number: ${error}`;
-                element.appendChild(errorDiv);
-            }
+            ReactDOM.render(
+                React.createElement(
+                    ErrorBoundary,
+                    {
+                        FallbackComponent: ErrorFallback,
+                        onError: (error, info) => {
+                            console.error('Vega renderer error:', error, info);
+                        }
+                    },
+                    React.createElement(ChartBigNumberOutputRendererContainer, {
+                        outputText: outputItem.text(),
+                        outputMetadata: outputItem.metadata
+                    })
+                ),
+                element
+            );
         },
 
         disposeOutputItem(id?: string) {

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ module.exports = {`
`74`	`74`	`'import/no-unresolved': [`
`75`	`75`	`'error',`
`76`	`76`	`{`
`77`		`- ignore: ['monaco-editor', 'vscode']`
	`77`	`+ ignore: ['monaco-editor', 'vscode', 'error-boundary']`
`78`	`78`	`}`
`79`	`79`	`],`
`80`	`80`	`'import/prefer-default-export': 'off',`
Original file line number	Diff line number	Diff line change
`@@ -262,7 +262,6 @@ function translateDisplayDataOutput(`
`262`	`262`	`}`
`263`	`263`	`}`
`264`	`264`	`*/`
`265`		`- // TODO - add DeepnotePocket zod schema validation`
`266`	`265`	`const deepnotePocket = cellMetadata?.__deepnotePocket as Pocket \| undefined;`
`267`	`266`	`const deepnoteBlockType = deepnotePocket?.type;`
`268`	`267`
Original file line number	Diff line number	Diff line change
`@@ -378,9 +378,10 @@ export class DeepnoteDataConverter {`
`378`	`378`	`);`
`379`	`379`	`}`
`380`	`380`
`381`		`- // Plain text as fallback (always last)`
`382`	`381`	`if (data['text/plain']) {`
`383`	`382`	`let mimeType = 'text/plain';`
	`383`	`+ // deepnote-toolkit returns the text/plain mime type for big number outputs`
	`384`	`+ // and for the custom renderer to be used, we need to return the application/vnd.deepnote.chart.big-number+json mime type`
`384`	`385`	`if (blockType === 'big-number' && !(CHART_BIG_NUMBER_MIME_TYPE in data)) {`
`385`	`386`	`mimeType = CHART_BIG_NUMBER_MIME_TYPE;`
`386`	`387`	`}`