import * as React from 'react' ; import { Dispatch } from 'redux' ; import { ActionCreators } from 'redux-undo' ; import { Data } from 'vega-lite/build/src/data' ; import { FacetedCompositeUnitSpec , TopLevel } from 'vega-lite/build/src/spec' ; import { datasetLoad , SET_APPLICATION_STATE , SET_CONFIG } from '../actions' ; import { SPEC_LOAD } from '../actions/shelf' ; import { VoyagerConfig } from '../models/config' ; import { State } from '../models/index' ; import { AppRoot } from './app-root' ; export interface Props extends React . Props < App > { config ? : VoyagerConfig ; data ? : Data ; applicationState ? : Readonly < State > ; spec ? : TopLevel < FacetedCompositeUnitSpec > ; filename ? : string ; dispatch : Dispatch < State > ; } export class App extends React . PureComponent < Props , { } > { constructor ( props ) { super ( props ) ; } public componentWillUpdate ( nextProps ) { this . update ( nextProps ) ; } public componentWillMount ( ) { this . props . dispatch ( ActionCreators . clearHistory ( ) ) ; this . update ( this . props ) ; } public render ( ) { return < AppRoot />; } private update ( nextProps ) { const { data , config , applicationState , dispatch , spec , filename } = nextProps ; if ( data ) { this . setData ( data , filename ) ; } if ( config ) { this . setConfig ( config ) ; } if ( spec ) { this . setSpec ( spec , filename ) ; } if ( applicationState ) { this . setApplicationState ( applicationState ) ; } } private setData ( data , filename ) { return this . props . dispatch ( datasetLoad ( filename , data ) ) ; } private setConfig ( config ) { this . props . dispatch ( { type : SET_CONFIG , payload : { config , } } ) ; } private setSpec ( spec , filename ) { if ( spec . data ) { this . setData ( spec . data , filename ) . then ( ( ) => { this . shelfSpecLoad ( spec ) ; } , ( err ) => { throw new Error ( 'error setting data for spec:' + err . toString ( ) ) ; } ) ; } else { this . shelfSpecLoad ( spec ) ; } } private shelfSpecLoad ( spec ) { this . props . dispatch ( { type : SPEC_LOAD , payload : { spec , keepWildcardMark : false } } ) ; } private setApplicationState ( state ) { this . props . dispatch ( { type : SET_APPLICATION_STATE , payload : { state , } } ) ; } }