diff --git a/packages/react-vega/src/VegaEmbed.tsx b/packages/react-vega/src/VegaEmbed.tsx index 12fa4363..6822d572 100644 --- a/packages/react-vega/src/VegaEmbed.tsx +++ b/packages/react-vega/src/VegaEmbed.tsx @@ -1,6 +1,7 @@ import React, { CSSProperties } from 'react'; import vegaEmbed, { EmbedOptions, VisualizationSpec } from 'vega-embed'; -import { ViewListener, View, SignalListeners } from './types'; +import type { Result } from 'vega-embed'; +import { ViewListener, SignalListeners } from './types'; import shallowEqual from './utils/shallowEqual'; import getUniqueFieldNames from './utils/getUniqueFieldNames'; import { NOOP } from './constants'; @@ -21,7 +22,7 @@ export type VegaEmbedProps = { export default class VegaEmbed extends React.PureComponent { containerRef = React.createRef(); - viewPromise?: Promise; + resultPromise?: Promise; componentDidMount() { this.createView(); @@ -102,11 +103,11 @@ export default class VegaEmbed extends React.PureComponent { }; modifyView = (action: ViewListener) => { - if (this.viewPromise) { - this.viewPromise - .then((view) => { - if (view) { - action(view); + if (this.resultPromise) { + this.resultPromise + .then((result) => { + if (result) { + action(result.view); } return true; @@ -119,12 +120,15 @@ export default class VegaEmbed extends React.PureComponent { const { spec, onNewView, signalListeners = {}, width, height, ...options } = this.props; if (this.containerRef.current) { const finalSpec = combineSpecWithDimension(this.props); - this.viewPromise = vegaEmbed(this.containerRef.current, finalSpec, options) - .then(({ view }) => { - if (addSignalListenersToView(view, signalListeners)) { - view.run(); + this.resultPromise = vegaEmbed(this.containerRef.current, finalSpec, options) + .then((result) => { + if (result) { + const { view } = result; + if (addSignalListenersToView(view, signalListeners)) { + view.run(); + } } - return view; + return result; }) .catch(this.handleError); @@ -135,10 +139,16 @@ export default class VegaEmbed extends React.PureComponent { } clearView() { - this.modifyView((view) => { - view.finalize(); - }); - this.viewPromise = undefined; + if (this.resultPromise) { + this.resultPromise + .then((result) => { + if (result) { + result.finalize(); + } + }) + .catch(this.handleError); + } + this.resultPromise = undefined; return this; }