feat: Better UX for input blocks

build/esbuild/build.ts

@@ -379,6 +379,11 @@ async function buildAll() {
             path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'integrations', 'index.tsx'),
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'integrations', 'index.js'),
             { target: 'web', watch: watchAll }
+        ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'selectInputSettings', 'index.tsx'),
+            path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'selectInputSettings', 'index.js'),
+            { target: 'web', watch: watchAll }
         )
     );
 

src/notebooks/deepnote/converters/inputConverters.ts

@@ -14,8 +14,8 @@ import {
     DeepnoteFileInputMetadataSchema,
     DeepnoteButtonMetadataSchema
 } from '../deepnoteSchemas';
-import { parseJsonWithFallback } from '../dataConversionUtils';
 import { DEEPNOTE_VSCODE_RAW_CONTENT_KEY } from './constants';
+import { formatInputBlockCellContent } from '../inputBlockContentFormatter';
 
 export abstract class BaseInputBlockConverter<T extends z.ZodObject> implements BlockConverter {
     abstract schema(): T;
@@ -25,23 +25,21 @@ export abstract class BaseInputBlockConverter<T extends z.ZodObject> implements
     applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
         block.content = '';
 
-        const config = this.schema().safeParse(parseJsonWithFallback(cell.value));
+        // The cell value now contains just the variable name
+        const variableName = cell.value.trim();
 
-        if (config.success !== true) {
-            block.metadata = {
-                ...(block.metadata ?? {}),
-                [DEEPNOTE_VSCODE_RAW_CONTENT_KEY]: cell.value
-            };
-            return;
-        }
+        // Preserve existing metadata and update only the variable name
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
 
         if (block.metadata != null) {
             delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
         }
 
         block.metadata = {
             ...(block.metadata ?? {}),
-            ...config.data
+            ...baseMetadata,
+            deepnote_variable_name: variableName
         };
     }
 
@@ -50,21 +48,20 @@ export abstract class BaseInputBlockConverter<T extends z.ZodObject> implements
     }
 
     convertToCell(block: DeepnoteBlock): NotebookCellData {
-        const deepnoteJupyterRawContentResult = z.string().safeParse(block.metadata?.[DEEPNOTE_VSCODE_RAW_CONTENT_KEY]);
         const deepnoteMetadataResult = this.schema().safeParse(block.metadata);
 
         if (deepnoteMetadataResult.error != null) {
             console.error('Error parsing deepnote input metadata:', deepnoteMetadataResult.error);
             console.debug('Metadata:', JSON.stringify(block.metadata));
         }
 
-        const configStr = deepnoteJupyterRawContentResult.success
-            ? deepnoteJupyterRawContentResult.data
-            : deepnoteMetadataResult.success
-            ? JSON.stringify(deepnoteMetadataResult.data, null, 2)
-            : JSON.stringify(this.defaultConfig(), null, 2);
+        // Extract the variable name from metadata
+        const variableName = deepnoteMetadataResult.success
+            ? (deepnoteMetadataResult.data as { deepnote_variable_name?: string }).deepnote_variable_name || ''
+            : '';
 
-        const cell = new NotebookCellData(NotebookCellKind.Code, configStr, 'json');
+        // Create a code cell with Python language showing just the variable name
+        const cell = new NotebookCellData(NotebookCellKind.Code, `# ${variableName}`, 'python');
 
         return cell;
     }
@@ -86,6 +83,32 @@ export class InputTextBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_TEXT_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-text', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'plaintext');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // The cell value contains the text value
+        const value = cell.value;
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputTextareaBlockConverter extends BaseInputBlockConverter<typeof DeepnoteTextareaInputMetadataSchema> {
@@ -100,6 +123,32 @@ export class InputTextareaBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_TEXTAREA_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-textarea', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'plaintext');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // The cell value contains the text value
+        const value = cell.value;
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputSelectBlockConverter extends BaseInputBlockConverter<typeof DeepnoteSelectInputMetadataSchema> {
@@ -114,6 +163,46 @@ export class InputSelectBlockConverter extends BaseInputBlockConverter<typeof De
     defaultConfig() {
         return this.DEFAULT_INPUT_SELECT_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-select', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Parse the cell value to extract the selection
+        const cellValue = cell.value.trim();
+        let value: string | string[];
+
+        if (cellValue.startsWith('[') && cellValue.endsWith(']')) {
+            // Multi-select: parse array
+            const arrayContent = cellValue.slice(1, -1);
+            value = arrayContent
+                .split(',')
+                .map((v) => v.trim())
+                .filter((v) => v)
+                .map((v) => v.replace(/^["']|["']$/g, ''));
+        } else {
+            // Single select: remove quotes
+            value = cellValue.replace(/^["']|["']$/g, '');
+        }
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputSliderBlockConverter extends BaseInputBlockConverter<typeof DeepnoteSliderInputMetadataSchema> {
@@ -128,6 +217,32 @@ export class InputSliderBlockConverter extends BaseInputBlockConverter<typeof De
     defaultConfig() {
         return this.DEFAULT_INPUT_SLIDER_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-slider', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // The cell value contains the numeric value as a string
+        const value = cell.value.trim();
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputCheckboxBlockConverter extends BaseInputBlockConverter<typeof DeepnoteCheckboxInputMetadataSchema> {
@@ -142,6 +257,33 @@ export class InputCheckboxBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_CHECKBOX_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-checkbox', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Parse the cell value to get boolean
+        const cellValue = cell.value.trim();
+        const value = cellValue === 'True' || cellValue === 'true';
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputDateBlockConverter extends BaseInputBlockConverter<typeof DeepnoteDateInputMetadataSchema> {
@@ -156,6 +298,32 @@ export class InputDateBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_DATE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-date', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Remove quotes from the cell value
+        const value = cell.value.trim().replace(/^["']|["']$/g, '');
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputDateRangeBlockConverter extends BaseInputBlockConverter<typeof DeepnoteDateRangeInputMetadataSchema> {
@@ -170,6 +338,39 @@ export class InputDateRangeBlockConverter extends BaseInputBlockConverter<typeof
     defaultConfig() {
         return this.DEFAULT_INPUT_DATE_RANGE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-date-range', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Parse the cell value to extract the date range
+        const cellValue = cell.value.trim();
+        let value: [string, string] | string = '';
+
+        // Try to parse as tuple
+        const tupleMatch = cellValue.match(/\(\s*["']([^"']*)["']\s*,\s*["']([^"']*)["']\s*\)/);
+        if (tupleMatch) {
+            value = [tupleMatch[1], tupleMatch[2]];
+        }
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class InputFileBlockConverter extends BaseInputBlockConverter<typeof DeepnoteFileInputMetadataSchema> {
@@ -184,6 +385,32 @@ export class InputFileBlockConverter extends BaseInputBlockConverter<typeof Deep
     defaultConfig() {
         return this.DEFAULT_INPUT_FILE_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('input-file', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, cell: NotebookCellData): void {
+        block.content = '';
+
+        // Remove quotes from the cell value
+        const value = cell.value.trim().replace(/^["']|["']$/g, '');
+
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata,
+            deepnote_variable_value: value
+        };
+    }
 }
 
 export class ButtonBlockConverter extends BaseInputBlockConverter<typeof DeepnoteButtonMetadataSchema> {
@@ -198,4 +425,27 @@ export class ButtonBlockConverter extends BaseInputBlockConverter<typeof Deepnot
     defaultConfig() {
         return this.DEFAULT_BUTTON_CONFIG;
     }
+
+    override convertToCell(block: DeepnoteBlock): NotebookCellData {
+        const cellValue = formatInputBlockCellContent('button', block.metadata ?? {});
+        const cell = new NotebookCellData(NotebookCellKind.Code, cellValue, 'python');
+        return cell;
+    }
+
+    override applyChangesToBlock(block: DeepnoteBlock, _cell: NotebookCellData): void {
+        block.content = '';
+
+        // Button blocks don't store any value from the cell content
+        const existingMetadata = this.schema().safeParse(block.metadata);
+        const baseMetadata = existingMetadata.success ? existingMetadata.data : this.defaultConfig();
+
+        if (block.metadata != null) {
+            delete block.metadata[DEEPNOTE_VSCODE_RAW_CONTENT_KEY];
+        }
+
+        block.metadata = {
+            ...(block.metadata ?? {}),
+            ...baseMetadata
+        };
+    }
 }