tfjs-vis - error in vega rendering scatterplot - basic example from the docs

TensorFlow.js version

“@tensorflow/tfjs”: “^2.0.0”, “@tensorflow/tfjs-vis”: “^1.4.0”,

Browser version

Safari Version 13.0.3 (15608.3.10.1.4) Chrome Version 83.0.4103.97 (Offizieller Build) (64-Bit)

Describe the problem

I want to run sample code for scatterplot from documentation in a React/Storybook setup. An exception is thrown:

“Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘code.length’)”

this is the line in vega: https://github.com/vega/vega/blob/62565bbe084a422c4a0cbc6e19c6f7c45a3e5137/packages/vega-runtime/src/expression.js#L25 operator: (ctx, expr) => expression(ctx, ['_'], expr.code),

that means the variable “code” is missing in the variable ‘expr’ which results in “undefined is not an object”. This is the content of ‘expr’, extracted from debugger:

{"offset":18,"direction":"horizontal","left":{"direction":"vertical"},"right":{"direction":"vertical"}}"

so here vega expects a field ‘code’ which is missing.

Maybe a bug in communication between ‘tfjs-vis’ and ‘vega’, or some kind of compatibility problem?

Code to reproduce the bug / link to feature request

import React from 'react';
import * as tf from '@tensorflow/tfjs';
import * as tfvis from '@tensorflow/tfjs-vis';

export function Sample() {
    const renderIt = () => {
        const doRender = async () => {
        const series1 = Array(100).fill(0)
            .map(y => Math.random() * 100 - (Math.random() * 50))
            .map((y, x) => ({ x, y, }));

         const series2 = Array(100).fill(0)
            .map(y => Math.random() * 100 - (Math.random() * 150))
            .map((y, x) => ({ x, y, }));

        const series = ['First', 'Second'];
        const data = { values: [series1, series2], series }

        const surface = { name: 'Scatterplot', tab: 'Charts' };
            const renderResult = await tfvis.render.scatterplot(surface, data);
          };
          doRender();
    }

    return <button onClick={() => renderIt()}>test render scatterplot</button>;
}

[tafsiri]

Ok, I was able to reproduce this too, I think an older lockfile was preventing me from getting the same error, so I cleared those out. I release a pre-release with the fix, if you could give that a try and confirm it works in your setup that would be great (the issue is related to some vega dependencies). Here is that version. https://www.npmjs.com/package/@tensorflow/tfjs-vis/v/1.4.2-pre.1 its published under a ‘next’ tag on npm, so you probably have to manually set “1.4.2-pre.1” as your version for tfjs-vis in your package.json. Let me know if that works and I’ll do a regular release shortly after

[tafsiri]

Thanks for confirming, https://www.npmjs.com/package/@tensorflow/tfjs-vis/v/1.4.2 has been published