import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Workspace , WorkspaceProps , DemoDataProvider , ToolbarProps , } from '../src/graph-explorer/index' ; import { onPageLoad , tryLoadLayoutFromLocalStorage , saveLayoutToLocalStorage , } from './common' ; const CLASSES = require ( './resources/classes.json' ) ; const LINK_TYPES = require ( './resources/linkTypes.json' ) ; const ELEMENTS = require ( './resources/elements.json' ) ; const LINKS = require ( './resources/links.json' ) ; export interface Props extends ToolbarProps { onExampleClick ? : ( ) => void ; } const CLASS_NAME = 'graph-explorer-toolbar' ; export class Toolbar extends React . Component < Props , { } > { render ( ) { return ( < div className = { CLASS_NAME } > < div className = "graph-explorer-btn-group graph-explorer-btn-group-sm" > < span className = { `${ CLASS_NAME }__layout-group` } > < label className = "graph-explorer-label" > < span > Layout - < /span> < /label> < span className = "graph-explorer-btn-group graph-explorer-btn-group-sm" > < button type = "button" className = "graph-explorer-btn graph-explorer-btn-default" onClick = { this . props . onForceLayout } > < span title = "Force layout" className = "fa fa-snowflake-o" aria - hidden = "true" / > < /button> < button type = "button" className = "graph-explorer-btn graph-explorer-btn-default" onClick = { this . props . onExampleClick } > < span title = "Example button" > Exapmle button < /span> < /button> < /span> < /span> < /div> < /div>); } } function onWorkspaceMounted ( workspace ) { if ( ! workspace ) { return ; } const model = workspace . getModel ( ) ; const diagram = tryLoadLayoutFromLocalStorage ( ) ; model . importLayout ( { dataProvider : new DemoDataProvider ( CLASSES , LINK_TYPES , ELEMENTS , LINKS ) , diagram , validateLinks : true , } ) ; } const props = { ref : onWorkspaceMounted , onSaveDiagram : ( workspace ) => { const diagram = workspace . getModel ( ) . exportLayout ( ) ; window . location . hash = saveLayoutToLocalStorage ( diagram ) ; window . location . reload ( ) ; } , toolbar : ( < Toolbar onExampleClick = { ( ) => { alert ( 'Example button has been pressed!' ) ; } } />), } ; onPageLoad ( ( container ) => { ReactDOM . render ( React . createElement ( Workspace , props ) , container ) ; } ) ;