[tfjs-vis] Upgrade vega

tfjs-vis/karma.conf.js

@@ -18,6 +18,26 @@
 const karmaTypescriptConfig = {
   tsconfig: 'tsconfig.json',
   reports: {},
+  bundlerOptions: {
+    acornOptions: {
+      ecmaVersion: 8,
+    },
+    transforms: [
+      require('karma-typescript-es6-transform')({
+        presets: [[
+          'env', {
+            targets: {
+              browsers: [
+                'last 10 Chrome versions',
+                'last 10 Firefox versions',
+                'last 5 Safari versions',
+              ]
+            }
+          }
+        ]]
+      }),
+    ]
+  }
 };
 
 // Enable coverage reports and instrumentation under KARMA_COVERAGE=1 env

tfjs-vis/package.json

@@ -20,37 +20,40 @@
     "publish-local": "rimraf dist/ && yarn build && yalc push"
   },
   "dependencies": {
-    "d3-format": "^1.3.0",
-    "d3-selection": "^1.3.0",
-    "glamor": "^2.20.40",
-    "glamor-tachyons": "^1.0.0-alpha.1",
-    "preact": "^8.2.9",
-    "vega-embed": "3.30.0"
+    "d3-format": "~1.3.0",
+    "d3-selection": "~1.3.0",
+    "glamor": "~2.20.40",
+    "glamor-tachyons": "~1.0.0-alpha.1",
+    "preact": "~8.2.9",
+    "vega": "~5.4.0",
+    "vega-embed": "~5.1.2",
+    "vega-lite": "~4.0.0-beta.1"
   },
   "devDependencies": {
     "@tensorflow/tfjs": "~1.0.0",
-    "@types/d3-format": "^1.3.0",
-    "@types/d3-selection": "^1.3.2",
-    "@types/jasmine": "^2.8.8",
-    "@types/json-stable-stringify": "^1.0.32",
+    "@types/d3-format": "~1.3.0",
+    "@types/d3-selection": "~1.3.2",
+    "@types/jasmine": "~2.8.8",
+    "@types/json-stable-stringify": "~1.0.32",
     "clang-format": "~1.2.2",
-    "jasmine": "^3.2.0",
-    "jasmine-core": "^3.2.0",
+    "jasmine": "~3.2.0",
+    "jasmine-core": "~3.2.0",
     "karma": "~4.0.1",
-    "karma-browserstack-launcher": "^1.3.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "^2.0.0",
-    "karma-safari-launcher": "^1.0.0",
-    "karma-typescript": "~4.0.0",
-    "npm-run-all": "^4.1.5",
-    "preact-render-spy": "^1.3.0",
-    "rimraf": "^2.6.2",
-    "tslint": "^5.11.0",
-    "tslint-no-circular-imports": "^0.5.0",
+    "karma-browserstack-launcher": "~1.3.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-firefox-launcher": "~1.1.0",
+    "karma-jasmine": "~2.0.0",
+    "karma-safari-launcher": "~1.0.0",
+    "karma-typescript": "~4.1.1",
+    "karma-typescript-es6-transform": "~4.1.1",
+    "npm-run-all": "~4.1.5",
+    "preact-render-spy": "~1.3.0",
+    "rimraf": "~2.6.2",
+    "tslint": "~5.11.0",
+    "tslint-no-circular-imports": "~0.5.0",
     "typescript": "3.5.3",
-    "webpack": "^4.16.3",
-    "webpack-cli": "^3.1.0",
+    "webpack": "~4.16.3",
+    "webpack-cli": "~3.1.0",
     "yalc": "~1.0.0-pre.21"
   },
   "peerDependencies": {

tfjs-vis/scripts/test-ci.sh

@@ -17,8 +17,8 @@
 set -e
 
 yarn
-yarn build
 yarn lint
+yarn build
 
 # Run the first karma separately so it can download the BrowserStack binary
 # without conflicting with others.

tfjs-vis/src/components/surface.tsx

@@ -34,7 +34,7 @@ interface SurfaceProps extends SurfaceInfoStrict {
 export class SurfaceComponent extends Component<SurfaceProps> {
 
   static defaultStyles: Partial<StyleOptions> = {
-    maxWidth: '580px',
+    maxWidth: '550px',
     maxHeight: '580px',
     height: 'auto',
     width: 'auto',

tfjs-vis/src/index.ts

@@ -27,6 +27,7 @@ import {layer, modelSummary} from './show/model';
 import {showPerClassAccuracy} from './show/quality';
 import {valuesDistribution} from './show/tensor';
 import {accuracy, confusionMatrix as metricsConfusionMatrix, perClassAccuracy} from './util/math';
+import {version} from './version';
 
 const render = {
   barchart,
@@ -57,5 +58,6 @@ export {visor} from './visor';
 export {render};
 export {metrics};
 export {show};
+export {version as version_vis};
 
 export * from './types';

tfjs-vis/src/render/barchart.ts

@@ -18,7 +18,7 @@
 import embed, {Mode, Result as EmbedRes, VisualizationSpec} from 'vega-embed';
 
 import {Drawable, VisOptions} from '../types';
-
+import {getDefaultHeight, getDefaultWidth} from '../util/dom';
 import {getDrawArea, nextFrame, shallowEquals} from './render_utils';
 
 /**
@@ -81,8 +81,8 @@ export async function barchart(
   };
 
   const spec: VisualizationSpec = {
-    'width': options.width || drawArea.clientWidth,
-    'height': options.height || drawArea.clientHeight,
+    'width': options.width || getDefaultWidth(drawArea),
+    'height': options.height || getDefaultHeight(drawArea),
     'padding': 0,
     'autosize': {
       'type': 'fit',

tfjs-vis/src/render/confusion_matrix.ts

@@ -18,7 +18,7 @@
 import embed, {Mode, VisualizationSpec} from 'vega-embed';
 
 import {ConfusionMatrixData, ConfusionMatrixOptions, Drawable,} from '../types';
-
+import {getDefaultHeight, getDefaultWidth} from '../util/dom';
 import {getDrawArea} from './render_utils';
 
 /**
@@ -134,8 +134,8 @@ export async function confusionMatrix(
   };
 
   const spec: VisualizationSpec = {
-    'width': options.width || drawArea.clientWidth,
-    'height': options.height || drawArea.clientHeight,
+    'width': options.width || getDefaultWidth(drawArea),
+    'height': options.height || getDefaultHeight(drawArea),
     'padding': 0,
     'autosize': {
       'type': 'fit',

tfjs-vis/src/render/heatmap.ts

@@ -19,6 +19,7 @@ import * as tf from '@tensorflow/tfjs';
 import embed, {Mode, VisualizationSpec} from 'vega-embed';
 
 import {Drawable, HeatmapData, HeatmapOptions} from '../types';
+import {getDefaultHeight, getDefaultWidth} from '../util/dom';
 import {assert} from '../util/utils';
 
 import {getDrawArea} from './render_utils';
@@ -172,8 +173,8 @@ export async function heatmap(
   };
 
   const spec: VisualizationSpec = {
-    'width': options.width || drawArea.clientWidth,
-    'height': options.height || drawArea.clientHeight,
+    'width': options.width || getDefaultWidth(drawArea),
+    'height': options.height || getDefaultHeight(drawArea),
     'padding': 0,
     'autosize': {
       'type': 'fit',

tfjs-vis/src/render/histogram.ts

@@ -19,7 +19,7 @@ import {format as d3Format} from 'd3-format';
 import embed, {Mode, VisualizationSpec} from 'vega-embed';
 
 import {Drawable, HistogramOpts, HistogramStats, TypedArray} from '../types';
-import {subSurface} from '../util/dom';
+import {getDefaultHeight, getDefaultWidth, subSurface} from '../util/dom';
 import {arrayStats} from '../util/math';
 
 import {table} from './table';
@@ -86,8 +86,8 @@ export async function histogram(
 
   const histogramSpec: VisualizationSpec = {
 
-    'width': options.width || histogramContainer.clientWidth,
-    'height': options.height || histogramContainer.clientHeight,
+    'width': options.width || getDefaultWidth(histogramContainer),
+    'height': options.height || getDefaultHeight(histogramContainer),
     'padding': 0,
     'autosize': {
       'type': 'fit',