feat: Pass block metadata to cell outputs for renderer to access

Author: tkislan

src/notebooks/deepnote/deepnoteConstants.ts

@@ -1 +1,3 @@
+export const OUTPUT_BLOCK_METADATA_KEY = 'blockMetadata';
+
 export const CHART_BIG_NUMBER_MIME_TYPE = 'application/vnd.deepnote.chart.big-number+json';

src/notebooks/deepnote/deepnoteDataConverter.ts

@@ -8,7 +8,7 @@ import { addPocketToCellMetadata, createBlockFromPocket } from './pocket';
 import { TextBlockConverter } from './converters/textBlockConverter';
 import { MarkdownBlockConverter } from './converters/markdownBlockConverter';
 import { ChartBigNumberBlockConverter } from './converters/chartBigNumberBlockConverter';
-import { CHART_BIG_NUMBER_MIME_TYPE } from './deepnoteConstants';
+import { CHART_BIG_NUMBER_MIME_TYPE, OUTPUT_BLOCK_METADATA_KEY } from './deepnoteConstants';
 
 /**
  * Utility class for converting between Deepnote block structures and VS Code notebook cells.
@@ -57,7 +57,7 @@ export class DeepnoteDataConverter {
             // The pocket is a place to tuck away Deepnote-specific fields for later.
             addPocketToCellMetadata(cell);
 
-            cell.outputs = this.transformOutputsForVsCode(block.type, block.outputs || []);
+            cell.outputs = this.transformOutputsForVsCode(block.type, block.metadata, block.outputs || []);
 
             return cell;
         });
@@ -198,6 +198,14 @@ export class DeepnoteDataConverter {
 
                 if (Object.keys(restMetadata).length > 0) {
                     (deepnoteOutput as DeepnoteOutput & { metadata?: Record<string, unknown> }).metadata = restMetadata;
+
+                    if (
+                        deepnoteOutput.metadata != null &&
+                        typeof deepnoteOutput.metadata === 'object' &&
+                        OUTPUT_BLOCK_METADATA_KEY in deepnoteOutput.metadata
+                    ) {
+                        delete deepnoteOutput.metadata[OUTPUT_BLOCK_METADATA_KEY];
+                    }
                 }
             }
 
@@ -207,6 +215,7 @@ export class DeepnoteDataConverter {
 
     private transformOutputsForVsCode(
         blockType: DeepnoteBlock['type'],
+        blockMetadata: DeepnoteBlock['metadata'],
         outputs: DeepnoteOutput[]
     ): NotebookCellOutput[] {
         return outputs.map((output) => {
@@ -294,7 +303,9 @@ export class DeepnoteDataConverter {
                     }
 
                     // Preserve metadata and execution_count
-                    const metadata: Record<string, unknown> = {};
+                    const metadata: Record<string, unknown> = {
+                        blockMetadata
+                    };
 
                     if (output.execution_count !== undefined) {
                         metadata.executionCount = output.execution_count;

src/notebooks/deepnote/deepnoteSchemas.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { OUTPUT_BLOCK_METADATA_KEY } from './deepnoteConstants';
+
 export const DeepnoteChartBigNumberOutputSchema = z.object({
     title: z.string().nullish(),
     value: z.string().nullish(),
@@ -43,5 +45,11 @@ export const DeepnoteBigNumberMetadataSchema = z.object({
         .transform((val) => val ?? null)
 });
 
+export function getDeepnoteBlockMetadataSchema<T extends z.ZodTypeAny>(schema: T) {
+    return z.object({
+        [OUTPUT_BLOCK_METADATA_KEY]: schema
+    });
+}
+
 export type DeepnoteChartBigNumberOutput = z.infer<typeof DeepnoteChartBigNumberOutputSchema>;
 export type DeepnoteBigNumberMetadata = z.infer<typeof DeepnoteBigNumberMetadataSchema>;

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

@@ -118,6 +118,10 @@ export function ChartBigNumberOutputRenderer({
         return 'deepnote-comparison-positive';
     }, [changeDirection, metadata.deepnote_big_number_comparison_format]);
 
+    const showComparison =
+        metadata.deepnote_big_number_comparison_enabled === true &&
+        metadata.deepnote_big_number_comparison_type != null;
+
     return (
         <div className="deepnote-big-number-container">
             <div className="deepnote-big-number-card">
@@ -128,18 +132,20 @@ export function ChartBigNumberOutputRenderer({
                     <div>
                         <p className="deepnote-big-number-value">{value}</p>
                     </div>
-                    <div className="deepnote-big-number-comparison">
-                        <div>
-                            <p className={`deepnote-comparison-text ${comparisonClassName}`}>
-                                {formattedComparisonValue}
-                            </p>
-                        </div>
-                        {output.comparisonTitle != null ? (
+                    {showComparison ? (
+                        <div className="deepnote-big-number-comparison">
                             <div>
-                                <p className="deepnote-comparison-title">{output.comparisonTitle}</p>
+                                <p className={`deepnote-comparison-text ${comparisonClassName}`}>
+                                    {formattedComparisonValue}
+                                </p>
                             </div>
-                        ) : null}
-                    </div>
+                            {output.comparisonTitle != null ? (
+                                <div>
+                                    <p className="deepnote-comparison-title">{output.comparisonTitle}</p>
+                                </div>
+                            ) : null}
+                        </div>
+                    ) : null}
                 </div>
             </div>
         </div>

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

@@ -8,7 +8,8 @@ import type { ActivationFunction, OutputItem, RendererContext } from 'vscode-not
 import { ChartBigNumberOutputRenderer } from './ChartBigNumberOutputRenderer';
 import {
     DeepnoteBigNumberMetadataSchema,
-    DeepnoteChartBigNumberOutputSchema
+    DeepnoteChartBigNumberOutputSchema,
+    getDeepnoteBlockMetadataSchema
 } from '../../../notebooks/deepnote/deepnoteSchemas';
 
 export const activate: ActivationFunction = (_context: RendererContext<unknown>) => {
@@ -17,15 +18,20 @@ export const activate: ActivationFunction = (_context: RendererContext<unknown>)
             try {
                 // 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);
+                const { blockMetadata } = getDeepnoteBlockMetadataSchema(DeepnoteBigNumberMetadataSchema).parse(
+                    outputItem.metadata
+                );
 
                 const chartBigNumberOutput = DeepnoteChartBigNumberOutputSchema.parse(data);
 
                 const root = document.createElement('div');
                 element.appendChild(root);
 
                 ReactDOM.render(
-                    React.createElement(ChartBigNumberOutputRenderer, { output: chartBigNumberOutput, metadata }),
+                    React.createElement(ChartBigNumberOutputRenderer, {
+                        output: chartBigNumberOutput,
+                        metadata: blockMetadata
+                    }),
                     root
                 );
             } catch (error) {