//© 2019 Dublin City University, Trinity College Dublin. All rights reserved. This material may not be reproduced, displayed, modified or distributed without the express prior written permission of the copyright holder. import React, { Component } from 'react'; import { Nav, NavItem, NavLink, TabContent, UncontrolledTooltip, Table, TabPane, Modal, Col, Row, ModalBody, ModalHeader, ModalFooter, Button } from 'reactstrap'; import classnames from 'classnames'; import exceptionInfoIconDetails from '../../../../config/exceptionInfoIconDetails'; import { connect } from 'react-redux'; import LoadingSpinner from '../../loading'; import LoadingFailed from '../../loadingFailed'; import { read } from '../../../../services/tripleStoreAPIs/readFromTripleStore'; import { fetchListOfSimilarTriples } from '../../../../services/tripleStoreAPIs/sparql/fetchListOfSimilarTriples'; import properties from '../../../../config/dashboardProperties'; class ProblematicThingViewDetails extends Component { constructor(props) { //console.log("ProblematicThingViewDetails constructor"); super(props); this.state = { problematicThing: "", activeTab: "", navigationTabs: [], triples: [], isloading: false, dataGraph: "", graphType: "" } //console.log(this.props); } toggleTab = (tabID) => { //console.log(typeof tabID); if (this.state.activeTab !== tabID) { this.setState({ activeTab: tabID }); } } componentDidMount() { //console.log("componentDidMount"); this.setState({ isloading: true }, () => { this.initialize().then((results) => { this.setState({ problematicThing: results[0], activeTab: results[1], navigationTabs: results[2], dataGraph: results[3], graphType: results[4], triples: results[5], isloading: false }); } ); }); } initialize = async () => { //console.log("initialize"); let problematicThing = Object.keys(this.props.problematicThingDetails)[0]; let activeTab = "Default"; let navigationTabs = []; navigationTabs.push("Default"); /* if (this.props.problematicThingDetails[problematicThing].effectedResources.length > 0) { navigationTabs.push("Impacted Resources"); }*/ if (this.props.problematicThingDetails[problematicThing].linkedProblematicThings.length > 0) { navigationTabs.push("Linked Problematic Things"); } navigationTabs.sort(); let dataGraph = ""; let graphType = ""; if (this.props.datasetDetailsCache[0].isSparqlEndPoint) { dataGraph = this.props.datasetDetailsCache[0].sparqlEndPoint; graphType = "SERVICE"; } else { let dataGraphName = this.props.datasetDetailsCache[0].fileName.replace(/^.*[\\/]/, '').split('.').slice(0, -1).join('.'); dataGraph = "http://" + properties.tripleStore.host + ":" + properties.tripleStore.port + "/" + properties.tripleStore.datastore + "/data/" + dataGraphName; graphType = "GRAPH"; } let query = await this.prepareQuery(problematicThing); //console.log(query); let triples = await this.fetchListOfTriples(dataGraph, graphType, query, problematicThing); //console.log(triples); return [problematicThing, activeTab, navigationTabs, dataGraph, graphType, triples]; } fetchListOfTriples_NEW = (dataGraph, graphType, query, problematicThing) => { let triples = []; let problem = problematicThing.split("-> ")[1]; let problematicPart = problematicThing.split("-> ")[0]; return new Promise((resolve) => { //let knowledgeBaseCache = JSON.parse(sessionStorage.getItem(this.props.knowledgeBaseID)); //let knowledgeBaseCache = this.props.knowledgeBaseCache; for (const knowledgeBase of this.props.knowledgeBaseCache) { if ((this.props.currentMetrics.indexOf(knowledgeBase.FailedMertic)>=0) & knowledgeBase[problematicPart]===problem) { triples.push({ Subject: knowledgeBase.Subject, Predicate: knowledgeBase.Predicate, Object: knowledgeBase.Object, Exception: [] }); } } for (const triple of triples) { //console.log("Inside Triple Array : "+tripleArray); for (const knowledgeBase of this.props.knowledgeBaseCache) { if (knowledgeBase.Subject === triple.Subject & knowledgeBase.Predicate === triple.Predicate & knowledgeBase.Object === triple.Object) { triple.Exception.push(knowledgeBase.Exception); } } } resolve(triples); }); } fetchListOfTriples = (dataGraph, graphType, query, problematicThing) => { let triples = []; let problem = problematicThing.split("-> ")[1]; return new Promise((resolve) => { read(fetchListOfSimilarTriples(graphType, dataGraph, query)).then((response) => { //console.log(response); if (response) { if (response.results.bindings.length > 0) { for (const result of response.results.bindings) { let subject = ""; let predicate = ""; let object = ""; if (result.Subject === undefined) { subject = problem; } else { subject = "<" + result.Subject.value + ">"; } if (result.Predicate === undefined) { predicate = problem; } else { predicate = "<" + result.Predicate.value + ">"; } if (result.Object === undefined) { object = problem; } else { if (result.Object.type === "uri") { object += "<" + result.Object.value + ">"; } else { if (result.Object["xml:lang"] !== undefined) { object += "\"\"\"" + result.Object.value + "\"\"\"@" + result.Object["xml:lang"]; } else if (result.Object["datatype"] !== undefined) { let value = result.Object.value.replace(/("|')/g, '\\$1'); object += "\"\"\"" + value + "\"\"\"" + "^^<" + result.Object["datatype"] + ">"; } else { object += "\"\"\"" + result.Object.value + "\"\"\""; } } } triples.push({ Subject: subject, Predicate: predicate, Object: object, Exception: [] }); } //let knowledgeBaseCache = JSON.parse(sessionStorage.getItem(this.props.knowledgeBaseID)); //let knowledgeBaseCache = this.props.knowledgeBaseCache; let tripleArray = 0; for (const triple of triples) { //console.log("Inside Triple Array : "+tripleArray); for (const knowledgeBase of this.props.knowledgeBaseCache) { if (knowledgeBase.Subject === triple.Subject & knowledgeBase.Predicate === triple.Predicate & knowledgeBase.Object === triple.Object) { triple.Exception.push(knowledgeBase.Exception); } } tripleArray += 1; } //console.log("Returning Similar Resources"); //console.log(similarResourcesFound); resolve(triples); } else { resolve(triples); } } else { resolve(triples); } }); }); } prepareQuery = (problematicThing) => { //console.log("prepareQuery"); let problematicPart = problematicThing.split("-> ")[0]; let problem = problematicThing.split("-> ")[1]; let query = ""; return new Promise((resolve) => { if (problematicPart === "Subject") { query = problem + " ?Predicate ?Object"; } else if (problematicPart === "Predicate") { query = "?Subject " + problem + " ?Object"; } else if (problematicPart === "Object") { query = "?Subject ?Predicate " + problem; } resolve(query); }); } renderDetails = (tabID) => { switch (tabID) { case "Default": return (
{this.state.problematicThing}

Exception(s) Related to this Problematic Thing : {this.props.problematicThingDetails[this.state.problematicThing].exception.map((exception, indexException) => { return {exception} {exceptionInfoIconDetails.infoIcon[exception]}  })}

{this.state.triples.map((triple, indexInside) => { if (triple.Exception.length > 0) { return } return })}
SubjectPredicateObjectException(s)
{triple.Subject}{triple.Predicate}{triple.Object}{triple.Exception.join(', ')}
{triple.Subject}{triple.Predicate}{triple.Object}
); case "Impacted Resources": return ( {this.props.problematicThingDetails[this.state.problematicThing].effectedResources.map((resource, indexInside) => { return })}
Resource
{resource}
); case "Linked Problematic Things": return ( {this.props.problematicThingDetails[this.state.problematicThing].linkedProblematicThings.map((link, indexInside) => { return })}
Problematic Thing (Click on the link to navigate)
this.props.linkNavigation(link)}>{link}
); } } render() { //console.log(this.state); let navigationTabs = null; let displayPane = null; navigationTabs = (this.state.navigationTabs.map((tabID, index) => { return { this.toggleTab(tabID); }}>{tabID} })); displayPane = (this.state.navigationTabs.map((tabID, index) => { return { this.renderDetails(tabID) } })); return ( Problematic Thing Details {displayPane} {this.state.isloading ? : null} ); } } const mapStateToProps = (state, ownProps) => { let datasetID = Number(ownProps.datasetID); let datasetDetails = state.datasetDetailsCache.filter((dataset) => { if (dataset.datasetID === datasetID) { return dataset; } return null; }); return ( { datasetDetailsCache: datasetDetails } ); } export default connect(mapStateToProps)(ProblematicThingViewDetails);