import * as React from "react" ; import { Service } from "../service" ; import { View } from "./editor" ; declare const Viz ; function isVizLoaded ( ) { return typeof Viz !== "undefined" ; } async function loadViz ( ) { await Service . lazyLoad ( "lib/viz-lite.js" ) ; } export interface VizViewProps { view : View ; } export class VizView extends React . Component < VizViewProps , { isVizLoaded : boolean ; content : string ; } > { constructor ( props ) { super ( props ) ; this . state = { isVizLoaded : isVizLoaded ( ) , content : this . props . view . file . buffer . getValue ( ) , } ; } updateThrottleDuration = 500 ; updateTimeout = 0 ; onDidChangeBuffer = ( ) => { if ( this . updateTimeout ) { window . clearTimeout ( this . updateTimeout ) ; } this . updateTimeout = window . setTimeout ( ( ) => { this . updateTimeout = 0 ; this . setState ( { content : this . props . view . file . buffer . getValue ( ) , } ) ; } , this . updateThrottleDuration ) ; } ; async componentWillMount ( ) { if ( ! this . state . isVizLoaded ) { await loadViz ( ) ; this . setState ( { isVizLoaded : isVizLoaded ( ) , } ) ; } } componentDidMount ( ) { this . props . view . file . onDidChangeBuffer . register ( this . onDidChangeBuffer ) ; } componentWillUnmount ( ) { this . props . view . file . onDidChangeBuffer . unregister ( this . onDidChangeBuffer ) ; } componentWillReceiveProps ( props ) { const last = this . props . view ; const next = props . view ; if ( last !== next ) { last . file . onDidChangeBuffer . unregister ( this . onDidChangeBuffer ) ; next . file . onDidChangeBuffer . register ( this . onDidChangeBuffer ) ; } } render ( ) { if ( ! this . state . isVizLoaded ) { return < div > Loading GraphViz , please wait ... < /div>; } try { const svg = Viz ( this . state . content ) ; return < div style = { { width : "100%" , height : "100%" , overflow : "scroll" } } dangerouslySetInnerHTML = { { __html : svg } } />; } catch ( e ) { return < div > GraphViz Error < /div>; } } }