OSiDashboard/Luzzu Dashboard/src/views/DataSetDetails/AnalyticsWidget/DetailsModels/ProblematicThingViewDetails.js

//© 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 (<React.Fragment>
          <div className="text-center">
          <h6 className="mb-1">{this.state.problematicThing}</h6>
          <p style={{ fontSize: "14px" }}>Exception(s) Related to this Problematic Thing : {this.props.problematicThingDetails[this.state.problematicThing].exception.map((exception, indexException) => { return <React.Fragment key={indexException}><i>{exception} </i><i className="fa fa-info-circle" id={exception + "_toolTipIcon"}>  </i><UncontrolledTooltip placement="right" target={exception + "_toolTipIcon"}>{exceptionInfoIconDetails.infoIcon[exception]}</UncontrolledTooltip>&nbsp;</React.Fragment> })}</p>
          </div>
          <font size="2"  >
            <Table hover bordered><thead><tr><th>Subject</th><th>Predicate</th><th>Object</th><th>Exception(s)</th></tr></thead><tbody>
              {this.state.triples.map((triple, indexInside) => {
                if (triple.Exception.length > 0) {
                  return <tr key={indexInside} style={{ 'backgroundColor': 'rgba(255,255,102,0.5)' }} ><td>{triple.Subject}</td><td>{triple.Predicate}</td><td>{triple.Object}</td><td>{triple.Exception.join(', ')}</td></tr>
                }
                return <tr key={indexInside}><td>{triple.Subject}</td><td>{triple.Predicate}</td><td>{triple.Object}</td><td></td></tr>
              })}
            </tbody></Table></font>
        </React.Fragment>);

      case "Impacted Resources":
        return (<React.Fragment><Table hover bordered striped><thead><tr><th>Resource</th></tr></thead><tbody>
          {this.props.problematicThingDetails[this.state.problematicThing].effectedResources.map((resource, indexInside) => {
            return <tr key={indexInside}><td>{resource}</td></tr>
          })}
        </tbody></Table>
        </React.Fragment>);

      case "Linked Problematic Things":
        return (<React.Fragment><Table hover bordered striped><thead><tr><th>Problematic Thing <small>(Click on the link to navigate)</small></th></tr></thead><tbody>
          {this.props.problematicThingDetails[this.state.problematicThing].linkedProblematicThings.map((link, indexInside) => {
            return <tr key={indexInside}><td onClick={() => this.props.linkNavigation(link)}>{link}</td></tr>
          })}
        </tbody></Table>
        </React.Fragment>);
    }
  }

  render() {
    //console.log(this.state);
    let navigationTabs = null;
    let displayPane = null;
    navigationTabs = (this.state.navigationTabs.map((tabID, index) => {
      return <NavItem key={index}><NavLink className={classnames({ active: this.state.activeTab === tabID })} onClick={() => { this.toggleTab(tabID); }}>{tabID}</NavLink></NavItem>
    }));

    displayPane = (this.state.navigationTabs.map((tabID, index) => {
      return <TabPane key={index} tabId={tabID} style={{ overflow: 'scroll', height: '30rem' }}><Row><Col>
        {
          this.renderDetails(tabID)
        }
      </Col></Row></TabPane>
    }));


    return (
      <React.Fragment>
        <Modal isOpen={true} className="modal-dialog-centered mw-100 w-100" >
          <ModalHeader style={{ margin: 'auto' }}>Problematic Thing Details</ModalHeader>
          <ModalBody>
            <Nav tabs>
              {navigationTabs}
            </Nav>
            <TabContent activeTab={this.state.activeTab}>
              {displayPane}
            </TabContent>
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.props.closeModel}>Ok</Button>
          </ModalFooter>
          {this.state.isloading ? <LoadingSpinner /> : null}
        </Modal>
      </React.Fragment>
    );
  }
}


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);