feat: Set up a custom renderer for data frames.

Author: Artmann

build/esbuild/build.ts

@@ -287,6 +287,11 @@ async function buildAll() {
             ),
             { target: 'web', watch: watchAll }
         ),
+        build(
+            path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'dataframe-renderer', 'index.ts'),
+            path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'dataframeRenderer', 'dataframeRenderer.js'),
+            { target: 'web', watch: isWatchMode }
+        ),
         build(
             path.join(extensionFolder, 'src', 'webviews', 'webview-side', 'variable-view', 'index.tsx'),
             path.join(extensionFolder, 'dist', 'webviews', 'webview-side', 'viewers', 'variableView.js'),

package.json

@@ -1809,6 +1809,16 @@
                 "entrypoint": "./dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js"
             }
         ],
+        "notebookRenderer": [
+            {
+                "id": "deepnote-dataframe-renderer",
+                "displayName": "Deepnote Dataframe Renderer",
+                "entrypoint": "./dist/webviews/webview-side/dataframeRenderer/dataframeRenderer.js",
+                "mimeTypes": [
+                    "application/vnd.deepnote.dataframe.v3+json"
+                ]
+            }
+        ],
         "viewsContainers": {
             "activitybar": [
                 {

src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface DataframeRendererProps {
+    data: any;
+}
+
+export const DataframeRenderer: React.FC<DataframeRendererProps> = ({ data }) => {
+    console.log('DataframeRenderer', data);
+
+    return <div className="dataframe-container">This is the Deepnote dataframe renderer</div>;
+};

src/webviews/webview-side/dataframe-renderer/index.ts

@@ -0,0 +1,35 @@
+import './styles.css';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import type { ActivationFunction, OutputItem, RendererContext } from 'vscode-notebook-renderer';
+
+import { DataframeRenderer } from './DataframeRenderer';
+
+export const activate: ActivationFunction = (_context: RendererContext<unknown>) => {
+    return {
+        renderOutputItem(outputItem: OutputItem, element: HTMLElement) {
+            try {
+                const data = outputItem.json();
+                console.log('Dataframe renderer - received data:', data);
+
+                const root = document.createElement('div');
+                element.appendChild(root);
+
+                ReactDOM.render(React.createElement(DataframeRenderer, { data }), root);
+            } catch (error) {
+                console.error('Error rendering dataframe:', error);
+                const errorDiv = document.createElement('div');
+                errorDiv.style.padding = '10px';
+                errorDiv.style.color = 'var(--vscode-errorForeground)';
+                errorDiv.textContent = `Error rendering dataframe: ${error}`;
+                element.appendChild(errorDiv);
+            }
+        },
+
+        disposeOutputItem(_id?: string) {
+            // Cleanup if needed
+        }
+    };
+};

src/webviews/webview-side/dataframe-renderer/styles.css

@@ -0,0 +1,42 @@
+.dataframe-container {
+    overflow: auto;
+    max-width: 100%;
+    font-family: var(--vscode-editor-font-family);
+    font-size: var(--vscode-editor-font-size);
+}
+
+.dataframe-table {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid var(--vscode-panel-border);
+}
+
+.dataframe-table th {
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    font-weight: 600;
+    padding: 8px 12px;
+    text-align: left;
+    position: sticky;
+    top: 0;
+    color: var(--vscode-foreground);
+}
+
+.dataframe-table td {
+    border: 1px solid var(--vscode-panel-border);
+    padding: 6px 12px;
+    color: var(--vscode-foreground);
+}
+
+.dataframe-table tbody tr.even-row {
+    background-color: var(--vscode-editor-background);
+}
+
+.dataframe-table tbody tr.odd-row {
+    background-color: var(--vscode-list-hoverBackground);
+}
+
+.dataframe-table tbody tr:hover {
+    background-color: var(--vscode-list-activeSelectionBackground);
+    color: var(--vscode-list-activeSelectionForeground);
+}