Fix broken Vega/Altair plot rendering. (#47)

Co-authored-by: Don Jayamanne <[email protected]>
Co-authored-by: Don Jayamanne <[email protected]>

Author: someguynamedjosh

build/webpack/webpack.client.config.js

@@ -35,7 +35,8 @@ module.exports = {
             memoryLimit: 9096
         }),
         new DefinePlugin({
-            scriptUrl: 'import.meta.url'
+            scriptUrl: 'import.meta.url',
+            'process.env': '{}' // utils references `process.env.xxx`
         }),
         new StringReplacePlugin(),
         ...common.getDefaultPlugins('extension')
@@ -50,7 +51,7 @@ module.exports = {
         fallback: {
             fs: false,
             path: require.resolve('path-browserify'),
-            util: require.resolve('util')
+            util: require.resolve('util') // vega uses `util.promisify` (we need something that works outside node)
         },
         extensions: ['.ts', '.tsx', '.js', '.json', '.svg']
     },

src/client/index.tsx

@@ -52,7 +52,8 @@ function renderOutput(outputItem: OutputItem, element: HTMLElement, ctx: Rendere
 function convertVSCodeOutputToExecuteResultOrDisplayData(
     outputItem: OutputItem
 ): nbformat.IExecuteResult | nbformat.IDisplayData {
-    const isImage = outputItem.mime.toLowerCase().startsWith('image/') && !outputItem.mime.toLowerCase().includes('svg');
+    const isImage =
+        outputItem.mime.toLowerCase().startsWith('image/') && !outputItem.mime.toLowerCase().includes('svg');
     // We add a metadata item `__isJson` to tell us whether the data is of type JSON or not.
     const isJson = (outputItem.metadata as Record<string, unknown>)?.__isJson === true;
     const value = isImage ? outputItem.blob() : isJson ? outputItem.json() : outputItem.text();

src/client/render.tsx

@@ -137,14 +137,20 @@ export class CellOutput extends React.Component<ICellOutputProps> {
         );
     }
     private renderOutput(data: nbformat.MultilineString | JSONObject, mimeType?: string) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unused-vars, no-unused-vars
-        const Transform = getTransform(this.props.mimeType!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unused-vars, no-unused-vars, @typescript-eslint/no-explicit-any
+        const Transform: any = getTransform(this.props.mimeType!);
+        const vegaPlot = mimeType && isVegaPlot(mimeType);
         const divStyle: React.CSSProperties = {
-            backgroundColor: mimeType && isAltairPlot(mimeType) ? 'white' : undefined
+            backgroundColor: vegaPlot ? 'white' : undefined
         };
+        if (vegaPlot) {
+            // Vega library expects data to be passed as serialized JSON instead of a native
+            // JS object.
+            data = typeof data === 'string' ? data : JSON.stringify(data);
+        }
         return (
             <div style={divStyle}>
-                <Transform data={data} />
+                <Transform data={data} onError={console.error} />
             </div>
         );
     }
@@ -155,6 +161,6 @@ export class CellOutput extends React.Component<ICellOutputProps> {
     }
 }
 
-function isAltairPlot(mimeType: string) {
+function isVegaPlot(mimeType: string) {
     return mimeType.includes('application/vnd.vega');
 }