feat(big-number): Integrate react-error-boundary for error handling and enhance big number output rendering

Author: tkislan

.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',

package-lock.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",

package.json

@@ -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'];

src/kernels/execution/cellExecutionMessageHandler.ts

@@ -262,7 +262,6 @@ function translateDisplayDataOutput(
         }
     }
     */
-    // TODO - add DeepnotePocket zod schema validation
     const deepnotePocket = cellMetadata?.__deepnotePocket as Pocket | undefined;
     const deepnoteBlockType = deepnotePocket?.type;
 

src/kernels/execution/helpers.ts

@@ -358,9 +358,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;
                             }

src/notebooks/deepnote/deepnoteDataConverter.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 type DeepnoteChartBigNumberOutput = z.infer<typeof DeepnoteChartBigNumberOutputSchema>;

src/notebooks/deepnote/deepnoteSchemas.ts

@@ -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]);

src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRenderer.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} />;
+}

src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRendererContainer.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>
+    );
+}