refactor: Clean up debug logs and improve big number block conversion handling

Author: tkislan

src/notebooks/deepnote/converters/chartBigNumberBlockConverter.ts

@@ -7,6 +7,7 @@ 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 {
@@ -37,8 +38,6 @@ export class ChartBigNumberBlockConverter implements BlockConverter {
     }
 
     convertToCell(block: DeepnoteBlock): NotebookCellData {
-        console.log('Converting big number block to cell:', block);
-
         const deepnoteJupyterRawContentResult = z.string().safeParse(block.metadata?.[DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
         const deepnoteBigNumberMetadataResult = DeepnoteBigNumberMetadataSchema.safeParse(block.metadata);
 
@@ -51,7 +50,7 @@ export class ChartBigNumberBlockConverter implements BlockConverter {
             ? deepnoteJupyterRawContentResult.data
             : deepnoteBigNumberMetadataResult.success
             ? JSON.stringify(deepnoteBigNumberMetadataResult.data, null, 2)
-            : JSON.stringify(DeepnoteBigNumberMetadataSchema.parse({}), null, 2);
+            : JSON.stringify(DEFAULT_BIG_NUMBER_CONFIG);
 
         const cell = new NotebookCellData(NotebookCellKind.Code, configStr, 'json');
         console.log(cell);

src/notebooks/deepnote/deepnoteSerializer.ts

@@ -64,15 +64,6 @@ export class DeepnoteNotebookSerializer implements NotebookSerializer {
 
             const cells = this.converter.convertBlocksToCells(selectedNotebook.blocks);
 
-            // for (const cell of cells) {
-            //     console.log(cell.kind, cell.languageId, cell);
-            //     for (const output of cell.outputs ?? []) {
-            //         for (const item of output.items) {
-            //             console.log('  ', item.mime, decodeContent(item.data));
-            //         }
-            //     }
-            // }
-
             console.log(`Converted ${cells.length} cells from notebook blocks.`);
 
             this.notebookManager.storeOriginalProject(deepnoteProject.project.id, deepnoteProject, selectedNotebook.id);

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

@@ -9,6 +9,7 @@ export function ChartBigNumberOutputRenderer({
     output: DeepnoteChartBigNumberOutput;
     metadata: DeepnoteBigNumberMetadata;
 }) {
+    // TODO: either remove or handle here .. currently handled in the parent
     const hasErrors = false;
 
     const title = useMemo(() => {
@@ -62,6 +63,10 @@ export function ChartBigNumberOutputRenderer({
         }
 
         if (metadata.deepnote_big_number_comparison_type === 'percentage-change') {
+            if (parsedComparisonValue === 0) {
+                return undefined;
+            }
+
             return (parsedValue - parsedComparisonValue) / parsedComparisonValue;
         }
 
@@ -77,7 +82,7 @@ export function ChartBigNumberOutputRenderer({
             return '-';
         }
 
-        if (!comparisonValue) {
+        if (comparisonValue == null) {
             return '-';
         }
 
@@ -91,7 +96,7 @@ export function ChartBigNumberOutputRenderer({
     }, [comparisonValue, metadata.deepnote_big_number_format, hasErrors, metadata.deepnote_big_number_comparison_type]);
 
     const changeDirection = useMemo(() => {
-        if (!comparisonValue) {
+        if (comparisonValue == null) {
             return 1;
         }
 
@@ -130,12 +135,9 @@ export function ChartBigNumberOutputRenderer({
                             </p>
                         </div>
                         {output.comparisonTitle != null ? (
-                            <>
-                                {' '}
-                                <div>
-                                    <p className="deepnote-comparison-title">{output.comparisonTitle}</p>
-                                </div>
-                            </>
+                            <div>
+                                <p className="deepnote-comparison-title">{output.comparisonTitle}</p>
+                            </div>
                         ) : null}
                     </div>
                 </div>

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

@@ -15,13 +15,11 @@ export const activate: ActivationFunction = (_context: RendererContext<unknown>)
     return {
         renderOutputItem(outputItem: OutputItem, element: HTMLElement) {
             try {
-                // .slice(1, -1) is to remove the quotes from the json string
-                const data = JSON.parse(outputItem.text().slice(1, -1));
+                // Remove single quotes from start and end of string if present
+                const data = JSON.parse(outputItem.text().replace(/^'|'$/g, ''));
                 const metadata = DeepnoteBigNumberMetadataSchema.parse(outputItem.metadata);
-                console.log('Chart Big Number renderer - received data:', data);
 
                 const chartBigNumberOutput = DeepnoteChartBigNumberOutputSchema.parse(data);
-                console.log('bigNumberConfig', chartBigNumberOutput);
 
                 const root = document.createElement('div');
                 element.appendChild(root);