Skip to content

Commit 9e162f0

Browse files
tafsiritafsiri
authored
[tfjs-vis] Upgrade vega and fix tooltip displays (#1980)
BUG * upgrade vega-embed * improve line chart tooltips. Fixes #1850 * Set default dimensions for surfaces. * add version export. Fixes #1703
1 parent 6ed0113 commit 9e162f0

File tree

15 files changed

+1880
-1038
lines changed

15 files changed

+1880
-1038
lines changed

‎tfjs-vis/karma.conf.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,26 @@
1818
const karmaTypescriptConfig = {
1919
tsconfig: 'tsconfig.json',
2020
reports: {},
21+
bundlerOptions: {
22+
acornOptions: {
23+
ecmaVersion: 8,
24+
},
25+
transforms: [
26+
require('karma-typescript-es6-transform')({
27+
presets: [[
28+
'env', {
29+
targets: {
30+
browsers: [
31+
'last 10 Chrome versions',
32+
'last 10 Firefox versions',
33+
'last 5 Safari versions',
34+
]
35+
}
36+
}
37+
]]
38+
}),
39+
]
40+
}
2141
};
2242

2343
// Enable coverage reports and instrumentation under KARMA_COVERAGE=1 env

‎tfjs-vis/package.json‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,37 +20,40 @@
2020
"publish-local": "rimraf dist/ && yarn build && yalc push"
2121
},
2222
"dependencies": {
23-
"d3-format": "^1.3.0",
24-
"d3-selection": "^1.3.0",
25-
"glamor": "^2.20.40",
26-
"glamor-tachyons": "^1.0.0-alpha.1",
27-
"preact": "^8.2.9",
28-
"vega-embed": "3.30.0"
23+
"d3-format": "~1.3.0",
24+
"d3-selection": "~1.3.0",
25+
"glamor": "~2.20.40",
26+
"glamor-tachyons": "~1.0.0-alpha.1",
27+
"preact": "~8.2.9",
28+
"vega": "~5.4.0",
29+
"vega-embed": "~5.1.2",
30+
"vega-lite": "~4.0.0-beta.1"
2931
},
3032
"devDependencies": {
3133
"@tensorflow/tfjs": "~1.0.0",
32-
"@types/d3-format": "^1.3.0",
33-
"@types/d3-selection": "^1.3.2",
34-
"@types/jasmine": "^2.8.8",
35-
"@types/json-stable-stringify": "^1.0.32",
34+
"@types/d3-format": "~1.3.0",
35+
"@types/d3-selection": "~1.3.2",
36+
"@types/jasmine": "~2.8.8",
37+
"@types/json-stable-stringify": "~1.0.32",
3638
"clang-format": "~1.2.2",
37-
"jasmine": "^3.2.0",
38-
"jasmine-core": "^3.2.0",
39+
"jasmine": "~3.2.0",
40+
"jasmine-core": "~3.2.0",
3941
"karma": "~4.0.1",
40-
"karma-browserstack-launcher": "^1.3.0",
41-
"karma-chrome-launcher": "^2.2.0",
42-
"karma-firefox-launcher": "^1.1.0",
43-
"karma-jasmine": "^2.0.0",
44-
"karma-safari-launcher": "^1.0.0",
45-
"karma-typescript": "~4.0.0",
46-
"npm-run-all": "^4.1.5",
47-
"preact-render-spy": "^1.3.0",
48-
"rimraf": "^2.6.2",
49-
"tslint": "^5.11.0",
50-
"tslint-no-circular-imports": "^0.5.0",
42+
"karma-browserstack-launcher": "~1.3.0",
43+
"karma-chrome-launcher": "~2.2.0",
44+
"karma-firefox-launcher": "~1.1.0",
45+
"karma-jasmine": "~2.0.0",
46+
"karma-safari-launcher": "~1.0.0",
47+
"karma-typescript": "~4.1.1",
48+
"karma-typescript-es6-transform": "~4.1.1",
49+
"npm-run-all": "~4.1.5",
50+
"preact-render-spy": "~1.3.0",
51+
"rimraf": "~2.6.2",
52+
"tslint": "~5.11.0",
53+
"tslint-no-circular-imports": "~0.5.0",
5154
"typescript": "3.5.3",
52-
"webpack": "^4.16.3",
53-
"webpack-cli": "^3.1.0",
55+
"webpack": "~4.16.3",
56+
"webpack-cli": "~3.1.0",
5457
"yalc": "~1.0.0-pre.21"
5558
},
5659
"peerDependencies": {

‎tfjs-vis/scripts/test-ci.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
set -e
1818

1919
yarn
20-
yarn build
2120
yarn lint
21+
yarn build
2222

2323
# Run the first karma separately so it can download the BrowserStack binary
2424
# without conflicting with others.

‎tfjs-vis/src/components/surface.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ interface SurfaceProps extends SurfaceInfoStrict {
3434
export class SurfaceComponent extends Component<SurfaceProps> {
3535

3636
static defaultStyles: Partial<StyleOptions> = {
37-
maxWidth: '580px',
37+
maxWidth: '550px',
3838
maxHeight: '580px',
3939
height: 'auto',
4040
width: 'auto',

‎tfjs-vis/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {layer, modelSummary} from './show/model';
2727
import {showPerClassAccuracy} from './show/quality';
2828
import {valuesDistribution} from './show/tensor';
2929
import {accuracy, confusionMatrix as metricsConfusionMatrix, perClassAccuracy} from './util/math';
30+
import {version} from './version';
3031

3132
const render = {
3233
barchart,
@@ -57,5 +58,6 @@ export {visor} from './visor';
5758
export {render};
5859
export {metrics};
5960
export {show};
61+
export {version as version_vis};
6062

6163
export * from './types';

‎tfjs-vis/src/render/barchart.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import embed, {Mode, Result as EmbedRes, VisualizationSpec} from 'vega-embed';
1919

2020
import {Drawable, VisOptions} from '../types';
21-
21+
import {getDefaultHeight, getDefaultWidth} from '../util/dom';
2222
import {getDrawArea, nextFrame, shallowEquals} from './render_utils';
2323

2424
/**
@@ -81,8 +81,8 @@ export async function barchart(
8181
};
8282

8383
const spec: VisualizationSpec = {
84-
'width': options.width || drawArea.clientWidth,
85-
'height': options.height || drawArea.clientHeight,
84+
'width': options.width || getDefaultWidth(drawArea),
85+
'height': options.height || getDefaultHeight(drawArea),
8686
'padding': 0,
8787
'autosize': {
8888
'type': 'fit',

‎tfjs-vis/src/render/confusion_matrix.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import embed, {Mode, VisualizationSpec} from 'vega-embed';
1919

2020
import {ConfusionMatrixData, ConfusionMatrixOptions, Drawable,} from '../types';
21-
21+
import {getDefaultHeight, getDefaultWidth} from '../util/dom';
2222
import {getDrawArea} from './render_utils';
2323

2424
/**
@@ -134,8 +134,8 @@ export async function confusionMatrix(
134134
};
135135

136136
const spec: VisualizationSpec = {
137-
'width': options.width || drawArea.clientWidth,
138-
'height': options.height || drawArea.clientHeight,
137+
'width': options.width || getDefaultWidth(drawArea),
138+
'height': options.height || getDefaultHeight(drawArea),
139139
'padding': 0,
140140
'autosize': {
141141
'type': 'fit',

‎tfjs-vis/src/render/heatmap.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import * as tf from '@tensorflow/tfjs';
1919
import embed, {Mode, VisualizationSpec} from 'vega-embed';
2020

2121
import {Drawable, HeatmapData, HeatmapOptions} from '../types';
22+
import {getDefaultHeight, getDefaultWidth} from '../util/dom';
2223
import {assert} from '../util/utils';
2324

2425
import {getDrawArea} from './render_utils';
@@ -172,8 +173,8 @@ export async function heatmap(
172173
};
173174

174175
const spec: VisualizationSpec = {
175-
'width': options.width || drawArea.clientWidth,
176-
'height': options.height || drawArea.clientHeight,
176+
'width': options.width || getDefaultWidth(drawArea),
177+
'height': options.height || getDefaultHeight(drawArea),
177178
'padding': 0,
178179
'autosize': {
179180
'type': 'fit',

‎tfjs-vis/src/render/histogram.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {format as d3Format} from 'd3-format';
1919
import embed, {Mode, VisualizationSpec} from 'vega-embed';
2020

2121
import {Drawable, HistogramOpts, HistogramStats, TypedArray} from '../types';
22-
import {subSurface} from '../util/dom';
22+
import {getDefaultHeight, getDefaultWidth, subSurface} from '../util/dom';
2323
import {arrayStats} from '../util/math';
2424

2525
import {table} from './table';
@@ -86,8 +86,8 @@ export async function histogram(
8686

8787
const histogramSpec: VisualizationSpec = {
8888

89-
'width': options.width || histogramContainer.clientWidth,
90-
'height': options.height || histogramContainer.clientHeight,
89+
'width': options.width || getDefaultWidth(histogramContainer),
90+
'height': options.height || getDefaultHeight(histogramContainer),
9191
'padding': 0,
9292
'autosize': {
9393
'type': 'fit',

0 commit comments

Comments
 (0)