import { createElement , ClassAttributes } from 'react' ; import * as ReactDOM from 'react-dom' ; import { Workspace , WorkspaceProps , SparqlDataProvider , SparqlGraphBuilder , OWLStatsSettings , SparqlQueryMethod } from '../src/ontodia/index' ; import { onPageLoad } from './common' ; function onWorkspaceMounted ( workspace ) { if ( ! workspace ) { return ; } const model = workspace . getModel ( ) ; const sparqlDataProvider = new SparqlDataProvider ( { endpointUrl : '/sparql' , queryMethod : SparqlQueryMethod . GET } , OWLStatsSettings ) ; const graphBuilder = new SparqlGraphBuilder ( sparqlDataProvider ) ; const loadingGraph = graphBuilder . getGraphFromConstruct ( `CONSTRUCT {
            ?inst rdf:type ?class.
            ?inst ?propType1 ?propValue1.
            ?inst rdfs:label ?label .
            ?propValue2 ?propType2 ?inst .
        } WHERE {
            BIND (<http://collection.britishmuseum.org/id/object/JCF8939> as ?inst)
            ?inst rdf:type ?class.
            OPTIONAL {?inst rdfs:label ?label}
            OPTIONAL {?inst ?propType1 ?propValue1.  FILTER(isURI(?propValue1)). }
            OPTIONAL {?propValue2 ?propType2 ?inst.  FILTER(isURI(?propValue2)). }
        } LIMIT 100` ) ; workspace . showWaitIndicatorWhile ( loadingGraph ) ; loadingGraph . then ( ( { diagram , preloadedElements } ) => model . importLayout ( { diagram , preloadedElements , dataProvider : sparqlDataProvider , } ) ) . then ( ( ) => { workspace . forceLayout ( ) ; workspace . zoomToFit ( ) ; } ) ; } const props = { ref : onWorkspaceMounted , } ; onPageLoad ( container => ReactDOM . render ( createElement ( Workspace , props ) , container ) ) ;