fix: Enhance error handling for big number metadata parsing and improve chart big number renderer logic

Author: tkislan

src/kernels/execution/cellExecution.ts

@@ -420,10 +420,18 @@ export class CellExecution implements ICellExecution, IDisposable {
         const deepnoteBlock = createBlockFromPocket(cellData, this.cell.index);
 
         if (deepnoteBlock.type === 'big-number') {
-            deepnoteBlock.metadata = {
-                ...deepnoteBlock.metadata,
-                ...DeepnoteBigNumberMetadataSchema.parse(JSON.parse(deepnoteBlock.content || '{}'))
-            };
+            try {
+                deepnoteBlock.metadata = {
+                    ...deepnoteBlock.metadata,
+                    ...DeepnoteBigNumberMetadataSchema.parse(JSON.parse(deepnoteBlock.content || '{}'))
+                };
+            } catch (ex) {
+                logger.error(
+                    `Cell execution failed to parse big number metadata, for cell Index ${this.cell.index}`,
+                    ex
+                );
+                return this.completedWithErrors(ex);
+            }
         }
 
         // Use createPythonCode to generate code with table state already included

src/notebooks/deepnote/converters/chartBigNumberBlockConverter.unit.test.ts

@@ -394,7 +394,7 @@ suite('ChartBigNumberBlockConverter', () => {
             assert.strictEqual(block.content, '');
             assert.strictEqual(block.metadata?.deepnote_big_number_title, 'new title');
             assert.strictEqual(block.metadata?.existing, 'value');
-            assert.isUndefined(block.metadata?.[DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
+            assert.doesNotHaveAnyKeys(block.metadata, [DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
         });
 
         test('handles empty content', () => {

src/notebooks/deepnote/deepnoteDataConverter.ts

@@ -306,7 +306,7 @@ export class DeepnoteDataConverter {
                         // Plain text as fallback (always last)
                         if (data['text/plain']) {
                             let mimeType = 'text/plain';
-                            if (blockType === 'big-number') {
+                            if (blockType === 'big-number' && !(CHART_BIG_NUMBER_MIME_TYPE in data)) {
                                 mimeType = CHART_BIG_NUMBER_MIME_TYPE;
                             }
                             items.push(NotebookCellOutputItem.text(data['text/plain'] as string, mimeType));

src/webviews/webview-side/chart-big-number-renderer/ChartBigNumberOutputRenderer.tsx

@@ -10,21 +10,11 @@ export function ChartBigNumberOutputRenderer({
     metadata: DeepnoteBigNumberMetadata;
 }) {
     // TODO: either remove or handle here .. currently handled in the parent
-    const hasErrors = false;
-
     const title = useMemo(() => {
-        if (hasErrors) {
-            return 'Not defined';
-        }
-
         return output.title || 'Title';
-    }, [output.title, hasErrors]);
+    }, [output.title]);
 
     const value = useMemo(() => {
-        if (hasErrors) {
-            return 'N/A';
-        }
-
         if (!output.value) {
             return 'Value';
         }
@@ -36,13 +26,9 @@ export function ChartBigNumberOutputRenderer({
         }
 
         return formatValue(parsedValue, metadata.deepnote_big_number_format ?? 'number');
-    }, [hasErrors, output.value, metadata.deepnote_big_number_format]);
+    }, [output.value, metadata.deepnote_big_number_format]);
 
     const comparisonValue = useMemo(() => {
-        if (hasErrors) {
-            return undefined;
-        }
-
         if (!output.comparisonValue) {
             return undefined;
         }
@@ -75,13 +61,9 @@ export function ChartBigNumberOutputRenderer({
         }
 
         return parsedValue - parsedComparisonValue;
-    }, [hasErrors, metadata.deepnote_big_number_comparison_type, output.comparisonValue, output.value]);
+    }, [metadata.deepnote_big_number_comparison_type, output.comparisonValue, output.value]);
 
     const formattedComparisonValue = useMemo(() => {
-        if (hasErrors) {
-            return '-';
-        }
-
         if (comparisonValue == null) {
             return '-';
         }
@@ -93,7 +75,7 @@ export function ChartBigNumberOutputRenderer({
         }
 
         return formatValue(comparisonValue, metadata.deepnote_big_number_format ?? 'number');
-    }, [comparisonValue, metadata.deepnote_big_number_format, hasErrors, metadata.deepnote_big_number_comparison_type]);
+    }, [comparisonValue, metadata.deepnote_big_number_format, metadata.deepnote_big_number_comparison_type]);
 
     const changeDirection = useMemo(() => {
         if (comparisonValue == null) {

src/webviews/webview-side/chart-big-number-renderer/index.ts

@@ -41,8 +41,24 @@ export const activate: ActivationFunction = (_context: RendererContext<unknown>)
             }
         },
 
-        disposeOutputItem(_id?: string) {
+        disposeOutputItem(id?: string) {
             // Cleanup if needed
+            if (id == null) {
+                return;
+            }
+            const element = document.getElementById(id);
+            if (element == null) {
+                return;
+            }
+            const roots = element.getElementsByTagName('div');
+            for (let i = 0; i < roots.length; i++) {
+                const root = roots.item(i);
+                if (root == null) {
+                    continue;
+                }
+                ReactDOM.unmountComponentAtNode(root);
+                element.removeChild(root);
+            }
         }
     };
 };