import { Component , OnInit } from '@angular/core' ; import { ActivatedRoute } from '@angular/router' ; import { MatSnackBar } from '@angular/material' ; import { Title } from '@angular/platform-browser' ; import 'codemirror/mode/turtle/turtle' ; import { QueryService } from './services/query.service' ; import { DataService , TabsData , ProjectData } from './services/data.service' ; import { SPARQLService } from './services/sparql.service' ; import { catchError } from 'rxjs/operators' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent implements OnInit { private queryResult ; private resultFieldExpanded : boolean = false ; public tabIndex : number ; public showJSON : boolean = false ; public editDescription : boolean = false ; public newDescription : string ; public tabTitles : string [ ] ; public data : TabsData ; public projectData : ProjectData ; public queryType : string ; public reasoning : boolean ; public queryTime : number ; public textOnly : boolean ; public dataOnly : boolean = false ; public fullScreen : boolean = false ; public loading : boolean ; public loadingMessage : string ; public triplestoreOption : boolean = true ; public localStore : boolean = true ; public toggleTooltip : string = 'Switch to triplestore' ; cmConfig = { lineNumbers : true , firstLineNumber : 1 , lineWrapping : true , matchBrackets : true , mode : 'text/turtle' } ; constructor ( private _qs , private _ds , private _ss , private route , public snackBar , private titleService ) { } ngOnInit ( ) { this . route . queryParams . subscribe ( map => { this . tabIndex = map . tab ? parseInt ( map . tab ) : 0 ; this . localStore = map . local == 0 ? false : true ; this . _ds . getTabTitles ( ) . subscribe ( res => this . tabTitles = res ) ; this . _ds . getProjectData ( ) . subscribe ( res => { this . projectData = res ; this . titleService . setTitle ( this . projectData . title ) ; } ) ; this . changeTab ( this . tabIndex ) ; } ) ; this . _ds . loadingStatus . subscribe ( loading => this . loading = loading ) ; this . _ds . loadingMessage . subscribe ( msg => this . loadingMessage = msg ) ; } changeMsg ( ) { this . _ds . setLoadingMessage ( "Loading triples in store" ) ; } doQuery ( ) { var query = this . data . query ; const data = this . data . triples ; if ( ! data ) return ; if ( query . toLowerCase ( ) . indexOf ( 'prefix' ) == - 1 ) { query = this . _qs . appendPrefixesToQuery ( query , data ) ; this . data . query = query ; } this . queryType = this . _qs . getQuerytype ( query ) ; if ( this . localStore ) { this . queryLocalstore ( query , data ) ; } else { this . queryTriplestore ( query ) ; } } log ( ev ) { console . log ( ev ) ; } async queryLocalstore ( query , data ) { if ( this . reasoning ) { this . _ds . setLoadingMessage ( "Performing query using Hylar" ) ; this . _ds . setLoaderStatus ( true ) ; this . _qs . doHylarQuery ( query , data ) . subscribe ( res => { this . queryResult = res ; this . resultFieldExpanded = true ; this . _ds . setLoaderStatus ( false ) ; } , err => { this . _ds . setLoaderStatus ( false ) ; this . queryResult = '' ; if ( err . indexOf ( "undefined" ) != - 1 ) { this . showSnackbar ( "The query did not return any results" , 10000 ) ; } if ( err . message && err . name ) { this . showSnackbar ( err . name + ': ' + err . message , 10000 ) ; } } ) ; } else { try { const res = await this . _qs . doQuery ( query , data ) ; this . queryResult = res ; this . resultFieldExpanded = true ; } catch ( err ) { this . queryResult = '' ; if ( err . message && err . name ) { if ( err . indexOf ( "undefined" ) != - 1 ) { this . showSnackbar ( "The query did not return any results" , 10000 ) ; } this . showSnackbar ( err . name + ': ' + err . message , 10000 ) ; } } } } async queryTriplestore ( query ) { var t1 = Date . now ( ) ; var qRes ; try { if ( this . queryType == 'update' ) { qRes = await this . _ss . updateQuery ( query ) ; this . showSnackbar ( "Query successful" ) ; return ; } else { qRes = await this . _ss . getQuery ( query , this . reasoning ) ; } } catch ( err ) { return this . showSnackbar ( err . statusText ) ; } if ( qRes . message ) { console . log ( qRes . message ) ; return this . showSnackbar ( qRes . message ) ; } var dt = Date . now ( ) - t1 ; this . queryTime = dt ; if ( this . queryType == 'select' ) { this . queryResult = qRes ; this . resultFieldExpanded = true ; } if ( this . queryType == 'construct' ) { const q = "CONSTRUCT WHERE {?s ?p ?o}" ; var processed ; try { processed = await this . _qs . doQuery ( q , qRes ) ; } catch ( err ) { console . log ( err ) ; return this . showSnackbar ( err ) ; } if ( ! processed ) { this . queryResult = null ; this . showSnackbar ( "Query returned no results. Did you load the correct dataset?" ) ; return ; } this . queryResult = processed ; this . resultFieldExpanded = true ; } } resetTriples ( ) { this . _ds . getSingle ( this . tabIndex ) . subscribe ( x => { this . data . triples = x . triples ; } ) ; } toggleStore ( ) { this . localStore = this . localStore == false ? true : false ; this . toggleTooltip = this . toggleTooltip == 'Switch to datasets' ? 'Switch to triplestore' : 'Switch to datasets' ; } changeTab ( i ) { if ( i == 'new' ) { console . log ( 'Add new dataset' ) ; } else { this . tabIndex = i ; this . _ds . getSingle ( i ) . subscribe ( x => { this . data = x ; this . reasoning = x . reasoning ? x . reasoning : false ; this . textOnly = x . textOnly ? x . textOnly : false ; ; if ( this . data . query ) { this . doQuery ( ) ; } else { this . queryResult = null ; } } ) ; } } tableClick ( URI ) { if ( this . localStore ) { var query = `SELECT * WHERE {\n\tBIND(<${ URI }> AS ?el)\n\t?el ?key ?value\n}` ; } else { var query = `SELECT *\nWHERE {\n\tBIND(<${ URI }> AS ?el)\n\tOPTIONAL { \n\t\tGRAPH ?graph {\n\t\t\t?el ?key ?value .\n\t\t}\n\t}\n\tOPTIONAL { ?el ?key ?value . }\n}` ; } this . data . query = query ; this . doQuery ( ) ; } toggleView ( ev ) { console . log ( ev ) ; } graphClick ( URI ) { console . log ( URI ) ; } showSnackbar ( message , duration ? ) { if ( ! duration ) duration = 10000 ; this . snackBar . open ( message , 'close' , { duration : duration , } ) ; } saveDescription ( ) { if ( this . newDescription ) { this . data . description = this . newDescription ; } this . editDescription = false ; } update ( ev ) { console . log ( ev ) ; } buildInsertQuery ( ) { let t = this . data . triples ; let lines = t . split ( '\n' ) ; const prefixes = lines . filter ( l => l . includes ( '@prefix' ) ) . map ( l => l . trim ( ) ) . map ( l => l . replace ( '@prefix' , "PREFIX" ) ) . map ( l => l . slice ( 0 , - 1 ) ) . map ( l => l . trim ( ) ) . join ( '\n' ) ; const rest = lines . filter ( l => ! l . includes ( '@prefix' ) ) . filter ( l => l . trim ( ) != "" ) . map ( l => `\t${ l }` ) . join ( '\n' ) ; this . data . query = `${ prefixes }\n\nINSERT DATA{\n${ rest }\n}` ; } }