/*
 * ============LICENSE_START=======================================================
 * org.onap.aai
 * ================================================================================
 * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */

import React, {Component} from 'react';
import commonApi from 'utils/CommonAPIService.js';
import {GeneralCommonFunctions} from 'utils/GeneralCommonFunctions.js';
import Modal from 'react-bootstrap/lib/Modal';
import Grid from 'react-bootstrap/lib/Grid';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import Button from 'react-bootstrap/lib/Button';
import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
import Spinner from 'utils/SpinnerContainer.jsx';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Panel from 'react-bootstrap/lib/Panel';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import FilterTypes from 'generic-components/filter/components/FilterTypes.jsx';
import PathFilterDslBuilder from './PathFilterDslBuilder.jsx';
import CustomDSLSaveLoad from 'app/byoq/CustomDSLSaveLoad.jsx';
import BootstrapSwitchButton from 'bootstrap-switch-button-react';
import * as d3 from "d3";
import 'd3-selection-multi';


let EDGERULES = GlobalExtConstants.EDGERULES;
let OXM = GlobalExtConstants.OXM;
let INVLIST = GlobalExtConstants.INVLIST;
let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));


let nodeTypes = [];
let properties = null;
let traverseRulesDsl = [];

const settings = {
	'NODESERVER': INVLIST.NODESERVER,
	'PROXY': INVLIST.PROXY,
  	'PREFIX': INVLIST.PREFIX,
  	'VERSION': INVLIST.VERSION,
    'APERTURE': INVLIST.APERTURE,
    'USESTUBS': INVLIST.useStubs
};
class CustomDslBuilder extends Component {
	constructor(props) {
		console.log('props>>>>',props);
        super(props);
        this.saveLoadComponent = React.createRef();
        APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
		this.state = {edgeRules : null,
		              connectableNodes:[],
		              showNodeModal: false,
		              enableModalFeedback: false,
		              showEditNodeModal: false,
		              treemap: null,
		              root: null,
		              svg: null,
		              duration: null,
		              g: null,
		              selectedNode: null,
		              traverseToNodes:[],
		              traverseToNodeAttributes: [],
		              nodeDetails: [],
		              dslQuery: '',
		              editModel:'',
		              showEditModal: false,
		              zoomFit: null,
		              autoZoomEnabled: true,
		              aggregateObjects: false,
		              init: true,
		              filterTypeDisplay: 'Filter Type',
                      selectedfilterType:[],
                      oxmMapping: null,
                      initialRootEdit: true,
		              showPathFilterDslBuilder: false,
                      pathFilterNodeType: '',
                      pathFilterNodeName:'',
                      pathFIlterAttrDetails: [],
                      dslPathBuilder:'',
                      dslPathTree:'',
                      loadedQueries: [],
                      queryDescription: '',
                      queryName: '',
                      category:'',
                      queryId:'',
                      treeLoadErrMsg: '',
                      isEditEnable:false,
                      pathFilterIndex:0,
                      isDataSteward: sessionStorage.getItem(ENVIRONMENT + 'roles') && sessionStorage.getItem(ENVIRONMENT + 'roles').indexOf('data_steward_ui_view') > -1,
                      isPublicChecked: sessionStorage.getItem(ENVIRONMENT + 'roles') && sessionStorage.getItem(ENVIRONMENT + 'roles').indexOf('data_steward_ui_view') > -1,
		      enableRealTime: JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'ENABLE_ANALYSIS'))
                    }
            this.baseState=this.state;
  }
  componentDidMount () {
    console.log('componentDidMount',JSON.stringify(this.props));
    //this.buildSQLStatementsFromSchema();
    this.processEdgeRules(EDGERULES);
    if(this.props.match.params.type && this.props.match.params.propId) {
        this.build(this.props.match.params.type, this.props.match.params.propId);
    }
  }
  initialize = () =>{
    this.setState({enableModalFeedback: true}, function () {
                                                  //console.log("EnableModalFeedback: " + this.state.enableModalFeedback);
                                                  setTimeout(() => {this.postSpinner()},1);
                                              });
  }

  postSpinner = () => {

    var nodeDetails = [];
    var node = null;
    console.log('initializing');
    var id = GeneralCommonFunctions.generateID();
    var nodeTypes = GeneralCommonFunctions.getNodeTypes();
    for (var i = 0; i < nodeTypes.length; i++) {
    	    node = nodeTypes[i] + id;
    	    var attributes = GeneralCommonFunctions.getFilteringOptions(nodeTypes[i]);
    	    if(!nodeDetails[node] && Object.keys(attributes).length > 0){
                nodeDetails[node] = {};
                nodeDetails[node].nodeType = nodeTypes[i];
                nodeDetails[node].isSelected = false;
                nodeDetails[node].attrDetails = attributes;
                nodeDetails[node].parentContainer = GeneralCommonFunctions.populateContainer(nodeTypes[i]);
            }
    }
    let nodesSorted = nodeDetails.sort(function (filter1, filter2) {
    	if (filter1.nodeType < filter2.nodeType) {
    		return -1;
    	} else if (filter1.nodeType > filter2.nodeType) {
    		return 1;
    	} else {
    		return 0;
    	}
    });
    //console.log('Node Types List' + JSON.stringify(nodesSorted));
    nodeDetails = nodesSorted;
    this.setState({nodeDetails: nodeDetails, showNodeModal: true, enableModalFeedback: false});
  }
  processEdgeRules = (data) => {
  	this.setState({
  		edgeRules: data.rules
  	},()=>{this.baseState=this.state});
  }
  closeNodeModal = () =>{
    this.setState({
    	showNodeModal: false,
    	enableModalFeedback: false,
    	traverseToNodes: [],
    	selectedNode: null
    });
  }
  closeEditNodeModal = () =>{
    this.setState({
    	showEditNodeModal: false,
        selectedNode: null,
        showPathFilterDslBuilder: false
    });
  }
  closePathNodeModal = () =>{
    console.log('closePathNodeModal>>>>>>>');
    this.setState({
    	showPathFilterDslBuilder: false,
        pathFilterNodeType: '',
        pathFilterNodeName:'',
        pathFIlterAttrDetails: []
    });
  }
  submitPathNodeModal = (dslQuery,nodetype,dslQueryTree,isEditEnable,pathFilterIndex) =>{
    console.log('CustomDSLBuilder  submitPathNodeModel>>>>>dslQuery ###',dslQuery);
    console.log(isEditEnable+'<<submitPathNodeModal this.state.nodeDetails>>>>',this.state.nodeDetails)  
    var nodeDetails = this.state.nodeDetails;
    if(!nodeDetails[nodetype].dslPath){
        nodeDetails[nodetype].dslPath=[];
        nodeDetails[nodetype].dslPathTree=[];
    }
    if(isEditEnable){        
        nodeDetails[nodetype].dslPath[pathFilterIndex]=dslQuery;
        nodeDetails[nodetype].dslPathTree[pathFilterIndex]=dslQueryTree;
        console.log('nodeDetails on edit>>>>>>>>>',nodeDetails);
    }else{        
        nodeDetails[nodetype].dslPath.push(dslQuery);
        nodeDetails[nodetype].dslPathTree.push(dslQueryTree);
    }    
    this.setState({ nodeDetails: nodeDetails },()=>{this.closePathNodeModal()});    
  }
 editPathNodeModal = (key,path,tree,indx) =>{
    console.log('editPathNodeModal>>>>>>>>>###',indx);
    let attrDetails=this.state.nodeDetails[key].attrDetails; 
    let nodeType=this.state.nodeDetails[key].nodeType;
    this.setState({showPathFilterDslBuilder: true,pathFilterNodeType: key,pathFilterNodeName:nodeType,pathFIlterAttrDetails: '',dslPathBuilder: path,dslPathTree:tree,isEditEnable:true,pathFilterIndex:indx}); 
 }
 deletePathNodeModal = (key,path,tree,index) =>{
    console.log(index+'<<deletePathNodeModal>>>>>',key);
    var nodeDetails = this.state.nodeDetails;
    nodeDetails[key].dslPath.splice(index,1);
    nodeDetails[key].dslPathTree.splice(index,1);
    this.setState({ nodeDetails: nodeDetails });
 }
  onNodeCheckbox(e) {
      var nodeDetails = this.state.nodeDetails;
      if (e.target.checked) {
        nodeDetails[e.target.value].isSelected = true;
        this.selectAll(e.target.value);
      }else {
        nodeDetails[e.target.value].isSelected = false;
        this.deselectAll(e.target.value);
      }
      // update the state with the new array of traverse to nodes
      this.setState({ nodeDetails: nodeDetails });
  }
  onNodeRadio(e) {
      var nodeDetails = this.state.nodeDetails;
      if (e.target.checked) {
        nodeDetails[e.target.value].isSelected = true;
        this.selectAll(e.target.value);
      }
      for (var key in nodeDetails) {
          if(key != e.target.value && nodeDetails[key].isSelected ){
            nodeDetails[key].isSelected = false;
            this.deselectAll(key);
          }
      }
      // update the state with the new array of traverse to nodes
      this.setState({ nodeDetails: nodeDetails });
  }
  onAutoZoomCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
      }else {
        cbValue = false;
      }
      this.setState({ autoZoomEnabled: cbValue });
  }
  onAggregateCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
      }else {
        cbValue = false;
      }
      this.setState({ aggregateObjects: cbValue });
  }
  onAttributeCheckbox(e){
        let splitVal = e.target.value.split("|");
        let nodeKey = splitVal[0];
        let attrValue = splitVal[1];
        let nodeDetails = this.state.nodeDetails;
        let node = nodeDetails[nodeKey];
        let attribute = null;
        if(!node.attrDetails){
            node.attrDetails = [];
        }
        if(!node.attrDetails[attrValue]){
            node.attrDetails[attrValue] = {};
            node.attrDetails[attrValue].isSelected = true;
            node.attrDetails[attrValue].filterValue = [];
            node.attrDetails[attrValue].filterType = [];
            node.attrDetails[attrValue].dslPath = [];
            node.attrDetails[attrValue].dslPathTree = [];
        }

        // check if the check box is checked or unchecked
        if (e.target.checked) {
          // add the value of the checkbox to nodes array
          node.attrDetails[attrValue].isSelected = true;
          node.attrDetails[attrValue].filterType[0]='EQ';
        } else {
          // or remove the value from the unchecked checkbox from the array
          node.attrDetails[attrValue].isSelected = false;
          //node.attrDetails[attrValue].filterType = [''];
          //node.attrDetails[attrValue].filterValue = [''];
        }
        nodeDetails[nodeKey] = node;
        // update the state with the new array of traverse to nodes
        this.setState({ nodeDetails: nodeDetails });
  }
  onFilterValueChange(e, nodeKey, attrKey, indx){
        let nodeDetails = this.state.nodeDetails;
        let node = nodeDetails[nodeKey];
        if(!node.attrDetails){
            node.attrDetails = [];
        }
        if(!node.attrDetails[attrKey]){
            node.attrDetails[attrKey] = {};
            node.attrDetails[attrKey].isSelected = true;
            node.attrDetails[attrKey].filterValue = [];
            node.attrDetails[attrKey].filterType = [];
            node.attrDetails[attrValue].dslPath = [];
            node.attrDetails[attrValue].dslPathTree = [];
        }
        // add the value of the checkbox to nodes array
        //node.attrDetails[attrKey].filterValue.push(e.target.value);
        let filterValArr=node.attrDetails[attrKey].filterValue;
        filterValArr[indx]=e.target.value;
        node.attrDetails[attrKey].filterValue=filterValArr;
        nodeDetails[nodeKey] = node;
        // update the state with the new array of traverse to nodes
        this.setState({ nodeDetails: nodeDetails });
  }
  submitNodeModal = () =>{
    if(this.state.selectedNode){
        var d = this.state.selectedNode;
        for(var node in this.state.nodeDetails){
            if(this.state.nodeDetails[node].isSelected){
                var newNodeObj = {
                          	type: 'node',
                            name: this.state.nodeDetails[node].nodeType,
                            details: {}
                          };
                 //Creates new Node
                 Object.assign(newNodeObj.details, this.state.nodeDetails[node]);
                 var newNode = d3.hierarchy(newNodeObj);
                 newNode.depth = d.depth + 1;
                 newNode.height = d.height - 1;
                 newNode.parent = d;
                 newNode.id = node;
                 if(!d.children){
                    d.children = [];
                 }
                if(newNodeObj.details){
                   var selectedAttributeCount = 0;
                   for (var key in newNodeObj.details.attrDetails){
                        if (newNodeObj.details.attrDetails[key].isSelected){
                            selectedAttributeCount++;
                        }
                        if(selectedAttributeCount === Object.keys(newNodeObj.details.attrDetails).length){
                           newNodeObj.details.includeInOutput = true;
                        }
                   }
                }
                 d.children.push(newNode);
                 this.setState({ nodeDetails: [] });
        }
      }
      this.update(this, d);
      this.setState({
          	showNodeModal: false,
          	enableModalFeedback: false,
          	traverseToNodes: [],
          	selectedNode: null
       });
    }else{
        var nodeType = "";
        var attrDetails = null;
        var dslPath =[];
        var dslPathTree=[];
        for (var key in this.state.nodeDetails) {
            if(this.state.nodeDetails[key].isSelected){
              nodeType = this.state.nodeDetails[key].nodeType;
              attrDetails = this.state.nodeDetails[key].attrDetails;
              dslPath =this.state.nodeDetails[key].dslPath;
              dslPathTree=this.state.nodeDetails[key].dslPathTree;
            }
        }
       this.build(nodeType, null, attrDetails,null,dslPath,dslPathTree);
       this.setState({ nodeDetails: [], showNodeModal: false, enableModalFeedback:false, traverseToNodes: [], selectedNode: null });
    }
  }
  submitEditNodeModal  = () =>{
    this.update(this, this.state.selectedNode);
    this.setState({showEditNodeModal: false,showPathFilterDslBuilder:false});
  }
  populateEdgeRules = (nodeType) => {
        let  nodeDetails=GeneralCommonFunctions.populateEdgeRules(nodeType,this.state.edgeRules);
  	    this.setState({
        	nodeDetails: nodeDetails
        });
  }
 
  buildOXMAttributesAndReturn = (nodeType) =>{
    var oxmArray = [];
    var result = JSON.parse(OXM);
    var arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
    for (var i = 0; i < arrayOfTypes.length; i++) {
        var propertiesDsl = [];
        for (var j = 0; j < arrayOfTypes[i]['java-attributes'][0]['xml-element'].length; j++) {
            let property =  arrayOfTypes[i]['java-attributes'][0]['xml-element'][j]['$']['name'];
            let type = arrayOfTypes[i]['java-attributes'][0]['xml-element'][j]['$']['type'];
            if (type === 'java.lang.String' || type === 'java.lang.Boolean') {
                propertiesDsl[property] = {};
                propertiesDsl[property].isSelected = false;
                propertiesDsl[property].attributeName = property;
                propertiesDsl[property].filterValue = [''];
                propertiesDsl[property].filterType = [''];
                propertiesDsl[property].dslPath = [];
                propertiesDsl[property].dslPathTree = [];
            }
        }
        let sortedPropertiesDsl = propertiesDsl.sort(function (filter1, filter2) {
        	if (filter1.attributeName < filter2.attributeName) {
        		return -1;
        	} else if (filter1.attributeName > filter2.attributeName) {
        		return 1;
        	} else {
        		return 0;
        	}
        });
        oxmArray[GeneralCommonFunctions.camelToDash(arrayOfTypes[i]['xml-root-element'][0]['$']['name'])] = sortedPropertiesDsl;
    }
    this.setState({oxmMapping: oxmArray});
    return oxmArray[nodeType];
  }

  runDSL = () => {
    console.log("running DSL");
    let paramToPassThrough = '';
    if(this.state.aggregateObjects){
        paramToPassThrough = '/customDsl/built-aggregate/' + btoa('<pre>' + this.state.dslQuery + '</pre>');
    }else{
        paramToPassThrough = '/customDsl/built/' + btoa('<pre>' + this.state.dslQuery + '</pre>');
    }
    this.props.history.push(paramToPassThrough);
  }
  submitEditAndRunDSL = () =>{
    this.setState({ dslQuery: this.state.editModel }, () => this.runDSL());
  }
  showEditDSLModal = () => {
    console.log("enabling DSL edit modal");
    this.setState({ editModel: this.state.dslQuery, showEditModal: true });
  }
  closeEditDSLModal = () => {
    console.log("closing DSL edit modal");
    this.setState({ showEditModal: false });
  }
  bindEdits = (e) => {
    this.setState({ editModel: e.target.value });
  }
  populateDSL = (tree, isInit) =>{
        var DSL = '';
        var treeArray = '';
        var treeArrayLength = 0;
        if(isInit){
            treeArray = tree;
            treeArrayLength = 1;
        }else{
            treeArray = tree.children;
            treeArrayLength = tree.children.length;
        }
        for(var k = 0; treeArray && k < treeArrayLength; k++){
            if(k === 0 && treeArrayLength > 1){
                DSL += '[';
            }
            var node = '';
            if(isInit){
                node = tree;
            }else{
                node = treeArray[k];
            }
            if(node.data){
                console.log('Node data while rendering DSl path>>',JSON.stringify(node.data));
                DSL += node.data.name;
                let propState=false;
                if(node.data.details){
                    var tempAttributeString = '';
                    var selectedAttributeCount = 0;
                    for (var key in node.data.details.attrDetails){
                        if (node.data.details.attrDetails[key].isSelected){
                            selectedAttributeCount++;
                            let aliasWithProp=node.data.details.attrDetails[key].attributeName;
                            if(node.data.details.attrDetails[key].alias){
                                aliasWithProp= aliasWithProp+'\' as \''+node.data.details.attrDetails[key].alias;
                            }
                            if(selectedAttributeCount === 1){
                                tempAttributeString += '{\'' + aliasWithProp +'\'';
                                propState=true;
                            }else{
                                tempAttributeString += ',\'' + aliasWithProp + '\'';
                            }
                        }
                    }
                    if(selectedAttributeCount === Object.keys(node.data.details.attrDetails).length){
                        DSL+= '*';
                    }
                    if((selectedAttributeCount < Object.keys(node.data.details.attrDetails).length) && propState){
                        DSL += tempAttributeString + '}';
                    }                    
                    for (var key in node.data.details.attrDetails){
                        if(node.data.details.attrDetails[key].filterValue && node.data.details.attrDetails[key].filterValue[0] !==''){
                            DSL += '(\'' + node.data.details.attrDetails[key].attributeName + '\',';
                            let dslValues='';
                            for(var indx=0; indx<node.data.details.attrDetails[key].filterValue.length; indx++){                            
                                dslValues=(indx>0) ? dslValues+',':dslValues;
                                if(this.state.enableRealTime && node.data.details.attrDetails[key].filterType && node.data.details.attrDetails[key].filterType[indx]){
                                    dslValues += node.data.details.attrDetails[key].filterType[indx]+'(\''+ node.data.details.attrDetails[key].filterValue[indx] + '\')';                                    
                                }else{
                                    dslValues +='\''+node.data.details.attrDetails[key].filterValue[indx] + '\'';                                    
                                }                      
                                if(node.data.details.attrDetails[key].filterValue.length-1 ===  indx){
                                    dslValues +=')';
                                }
                            }                        
                            DSL += dslValues;
                        }
                    }
                    if(node.data.details.dslPath && node.data.details.dslPath.length>0){
                        for(var n in node.data.details.dslPath){
                            DSL += node.data.details.dslPath[n];
                        }                        
                    }
                }
            }
            if(node.children){
                DSL+= '>' + this.populateDSL(node);
            }
            if(k !==  treeArrayLength - 1){
                DSL += ',';
            }
            if(k === treeArrayLength - 1 && treeArrayLength > 1){
                DSL += ']';
            }
        }
        return DSL;
  }
  update = (base, source, isInit) => {

        // Assigns the x and y position for the nodes
        var treeData = base.state.treemap(base.state.root);

        var DSL = base.populateDSL(treeData, true);
        console.log(JSON.stringify("DSL :" + DSL));

        this.setState({ dslQuery: DSL });

        // Compute the new tree layout.
        var nodes = treeData.descendants(),
            links = treeData.descendants().slice(1);

        var list1 = d3.selectAll(".fa")
            .filter(".fa-plus")
            .style("display", "block");

        // Normalize for fixed-depth.
        nodes.forEach(function(d){ d.y = d.depth * 100});
        // ****************** Nodes section ***************************

        // Update the nodes...
        var node = base.state.g.selectAll('g.node')
            .data(nodes, function(d) {return d.id });

        // Enter any new modes at the parent's previous position.
        var nodeEnter = node.enter().append('g')
            .attr('class', 'node')
            .attr("transform", function(d) {
              return "translate(" + source.y0 + "," + source.x0 + ")";
          })
         // .on('click', click)
          .on('dblclick', doubleClick);

        // Add Circle for the nodes
        nodeEnter.append('circle')
            .attr('class', 'node')
            .attr('r', 1e-6)
            .style("fill", "lightsteelblue");
        nodeEnter.append("svg:foreignObject")
                .attr("width", 20)
                .attr("height", 25)
                .attr("y", -14)
                .attr("x", -10)
            .append("xhtml:span")
        	     .attr("class", function (d) {
        	                    let icon = '';
        	                    if(!INVLIST.IS_ONAP){
        	                        icon = 'icon-datanetwork-serverL';
        	                    }else{
        	                        icon = 'browse-fa fa fa-server';
        	                    }
        	                    if(d.data.details && d.data.details.parentContainer){
        	                        var iconKey = ((d.data.details.parentContainer).replace(/-/g, '')).toUpperCase();
        	                        if(INVLIST.INVENTORYLIST[iconKey] && INVLIST.INVENTORYLIST[iconKey].icon){
        	                            return INVLIST.INVENTORYLIST[iconKey].icon;
        	                        }else{
        	                            return icon;
        	                        }
        	                    }else{
        	                        return icon;
        	                    }
        	      })
                 .style("font-size", function (d) {
                                     if (!INVLIST.IS_ONAP){
                                        return "20px";
                                     } else {
                                        return "16px";
                                     }
                 })
                 .attr("id", function (d) {return "nodeIcon" + d.id})
                 .style("color", '#387dff')
                 .style("display", "block")
                 .style("padding-top",function(d){
                                      if (!INVLIST.IS_ONAP){
                                        return "0px";
                                      } else {
                                        return "8px";
                                      }
                 });

        nodeEnter.append("svg:foreignObject")
                .attr("width", 6)
                .attr("height", 6)
                .attr("y", 10)
                .attr("x", -10)
                .on('click', function (d) {
                    if(d.data.details.isRootNode){
                        d = null;
                        base.resetBuilder();
                    }else{
                        for(var i = 0; d.parent.children && i < d.parent.children.length; i++){
                            if (d.parent.children.length > 1 && d.data.name === d.parent.children[i].data.name){
                                d.parent.children.splice(i, 1);
                            }else if (d.parent.children.length === 1 && d.data.name === d.parent.children[i].data.name){
                                d.parent.children = null;
                            }
                        }
                        base.update(base, d);
                    }
                })
            .append("xhtml:span")
        	     .attr("class", "fa fa-minus")
        	     .style("padding-top", "1px")
                 .style("font-size", function (d){ return "5px";})
                 .attr("id", function (d) {return "nodeDelete" + d.data.id})
                 .style("color", '#387dff')
                 .style("display", function (d) {return "block";});
        nodeEnter.append("svg:foreignObject")
                         .attr("width", 6)
                         .attr("height", 6)
                         .attr("y", 10)
                         .attr("x", 5)
                         .on('click', function (d) { base.setState({enableModalFeedback: true}, function () {setTimeout(() => {add(d)},1);})})
                     .append("xhtml:span")
                 	      .attr("class", "fa fa-plus")
                 	      .style("padding-top", "1px")
                          .style("font-size", function (d){ return "5px";})
                          .attr("id", function (d) {return "nodeAdd" + d.data.id})
                          .style("color", '#387dff');
        nodeEnter.append("svg:foreignObject")
                                 .attr("width", 6)
                                 .attr("height", 6)
                                 .attr("y", -17)
                                 .attr("x", -10)
                                 .on('click', function (d) { edit(d)})
                             .append("xhtml:span")
                         	      .attr("class", "fa fa-pencil-square")
                         	      .style("padding-top", "1px")
                                  .style("font-size", function (d){ return "5px";})
                                  .attr("id", function (d) {return "nodeEdit" + d.data.id})
                                  .style("color", '#387dff');
        // Add labels for the nodes
        nodeEnter.append("svg:foreignObject")
                  .attr("width", 60)
                  .attr("height", 40)
                  .attr("y", -10)
                  .attr("x", -75)
                  .append("xhtml:span")
                  .append('text')
                    .attr("dy", ".35em")
                    .attr("x", function(d) {
                        return d.children ? -13 : 13;
                    })
                    .text(function(d) { return d.data.name; })
                    .style("float","right")
                    .style("color", '#000000');

        // UPDATE
        var nodeUpdate = nodeEnter.merge(node);
        var postNodeDrawnCallBack = function (d){
          if(!isInit && base.state.autoZoomEnabled || d.data.details.isRootNode){
             base.state.zoomFit();
          }
        }
        // Transition to the proper position for the node
        nodeUpdate.transition()
          .duration(base.state.duration)
          .attr("transform", function(d) {
              return "translate(" + d.y + "," + d.x + ")"
           }).on("end", postNodeDrawnCallBack);

        // Update the node attributes and style
        nodeUpdate.select('circle.node')
          .attr('r', 11)
          .style("fill", "lightsteelblue")
          .attr('cursor', 'pointer');


        // Remove any exiting nodes
        var nodeExit = node.exit().transition()
            .duration(base.state.duration)
            .attr("transform", function(d) {
                return "translate(" + source.y + "," + source.x + ")";
            })
            .remove();

        // On exit reduce the node circles size to 0
        nodeExit.select('circle')
          .attr('r', 1e-6);

        // On exit reduce the opacity of text labels
        nodeExit.select('text')
          .style('fill-opacity', 1e-6);

        // ****************** links section ***************************

        // Update the links...
        var link = base.state.g.selectAll('path.link')
            .data(links, function(d) { return d.id; });

        // Enter any new links at the parent's previous position.
        var linkEnter = link.enter().insert('path', "g")
            .attr("class", "link")
            .attr('d', function(d){
              var o = {x: source.x0, y: source.y0}
              return diagonal(o, o)
            });

        // UPDATE
        var linkUpdate = linkEnter.merge(link);

        // Transition back to the parent element position
        linkUpdate.transition()
            .duration(base.state.duration)
            .attr('d', function(d){ return diagonal(d, d.parent) });

        // Remove any exiting links
        var linkExit = link.exit().transition()
            .duration(base.state.duration)
            .attr('d', function(d) {
              var o = {x: source.x, y: source.y}
              return diagonal(o, o)
            })
            .remove();

        // Store the old positions for transition.
        nodes.forEach(function(d){
          d.x0 = d.x;
          d.y0 = d.y;
        });

        // Creates a curved (diagonal) path from parent to the child nodes
        function diagonal(s, d) {
          var path = 'M ' + s.y + ' ' + s.x + ' C ' + ((s.y + d.y) / 2) + ' ' + s.x + ' ' +  (s.y + d.y) / 2 + ' ' + d.x + ' ' + d.y + ' ' + d.x;
          return path
        }
        base.state.svg.on("dblclick.zoom", null);
        // Toggle children on click.
        function add(d){
            base.populateEdgeRules(d.data.name,base.state.edgeRules);
            if(!d.children){
              d.children = [];
              d.data.children = [];
            }
            base.setState({
              selectedNode: d,
              showNodeModal: true,
              enableModalFeedback: false
            });

        }
        function edit(d){
            console.log("object editing: " + d);
            var nodeDetails = base.state.nodeDetails;
            //set up node details to have the node to edit
            if(d.data.details.isRootNode && base.props.match.params.type){
                var attributes = GeneralCommonFunctions.getFilteringOptions(d.data.details.nodeType);
                if(Object.keys(attributes).length > 0){
                    nodeDetails[0] = {};
                    nodeDetails[0].isRootNode = true;
                    nodeDetails[0].nodeType = base.props.match.params.type;
                    nodeDetails[0].isSelected = true;
                    nodeDetails[0].attrDetails = attributes;
                    if(base.state.initialRootEdit){
                        for (var key in nodeDetails[0].attrDetails) {
                            nodeDetails[0].attrDetails[key].isSelected = true;
                        }
                    }
                    nodeDetails[0].parentContainer = GeneralCommonFunctions.populateContainer(base.props.match.params.type);
                    for (var key in d.data.details.attrDetails) {
                        nodeDetails[0].attrDetails[key] = d.data.details.attrDetails[key];
                        if(base.state.initialRootEdit){
                            nodeDetails[0].attrDetails[key].filterType = [];
                            nodeDetails[0].attrDetails[key].filterType.push('EQ');
                        }
                    }
                }
                d.data.details = nodeDetails[0];
                base.setState({
                  initialRootEdit: false
                });
            }else{
                nodeDetails[0] = d.data.details;
            }
            base.setState({
              selectedNode: d,
              showEditNodeModal: true,
              showPathFilterDslBuilder: false
            });
        }
        function doubleClick(d) {
            edit(d);
        }
      }
  selectAll = (nodeKey) =>{
    var nodeDetails = this.state.nodeDetails;
    for (var key in nodeDetails[nodeKey].attrDetails) {
        nodeDetails[nodeKey].attrDetails[key].isSelected = true;
    }
    this.setState({nodeDetails: nodeDetails});
  }
  deselectAll = (nodeKey) =>{
    var nodeDetails = this.state.nodeDetails;
    for (var key in nodeDetails[nodeKey].attrDetails) {
        nodeDetails[nodeKey].attrDetails[key].isSelected = false;
    }
    this.setState({nodeDetails: nodeDetails});
  }
  build = (type, propID, attrDetails, preBuiltTree,dslPath,dslPathTree) =>{
    var selected = null;
    var treeData;
    if(!preBuiltTree && type && (propID || attrDetails)){
        let nodeType =  type;
        treeData = {
            "name": nodeType,
            "id": nodeType,
            "children": [],
            "details":{},
            "dslPath":[],
            "dslPathTree":[]
        }
        treeData.details.includeInOutput = true;
        treeData.details.isSelected = true;
        treeData.details.isRootNode = true;
        treeData.details.nodeType = nodeType;
        if(attrDetails){
            treeData.details.attrDetails = attrDetails;
        } else{
            treeData.details.attrDetails = {};
        }        
        if(dslPath && dslPath.length>0 && dslPathTree && dslPathTree.length>0){
            treeData.details.dslPath=dslPath;
            treeData.details.dslPathTree=dslPathTree;
        }
        if(propID){
            let propIds = (propID) ? propID.split(';') : '';
            let propertyValue = '';
            for(var i  in propIds){
            	let propValue = propIds[i].split(':');
            	console.log(propValue[0] + '....' + propValue[1]);
            	treeData.details.attrDetails[propValue[0]] = {};
                treeData.details.attrDetails[propValue[0]].filterValue=[];
                treeData.details.attrDetails[propValue[0]].filterValue.push(atob(propValue[1]).replace('<pre>','').replace('</pre>',''));
                treeData.details.attrDetails[propValue[0]].attributeName = propValue[0];
                treeData.details.attrDetails[propValue[0]].isSelected = true;
            }
        }
    }else if (preBuiltTree){
        treeData = preBuiltTree;
        if(treeData.details && treeData.details.dslPathTree && treeData.details.dslPathTree.length>0){
            for(var x=0;x<treeData.details.dslPathTree.length;x++){
                treeData.details.dslPath.push(GeneralCommonFunctions.populatePathDSL(treeData.details.dslPathTree[x],true,true,this.state.enableRealTime));
            }
        }
        if(treeData.children && treeData.children.length>0){
            for(var x=0;x<treeData.children.length;x++){               
               treeData.children[x]=this.updateDslPathValueOnExtract(treeData.children[x]);
            }
        }
    }

    // append the svg object to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select("#DSLBuilder");
    // Set the dimensions and margins of the diagram

    var margin = {top: 20, right: 120, bottom: 20, left: 120},
           width = +svg.attr("width") - margin.right - margin.left,
           height = +svg.attr("height") - margin.top - margin.bottom;

    var g = svg.append("g")
        .attr("transform", "translate("
              + margin.left + "," + margin.top + ")");

    var duration = 750,
        root;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([height - 200, width]);

    // Assigns parent, children, height, depth
    root = d3.hierarchy(treeData, function(d) { return d.children; });
    root.x0 = height / 2;
    root.y0 = 0;

    //Zoom functions
    function zoom_actions(){
        g.attr("transform", d3.event.transform)
    }
    //add zoom capabilities
    var zoom_handler = d3.zoom()
        .on("zoom", zoom_actions);

    zoom_handler(svg);

    function zoomFit() {
      var bounds = g.node().getBBox();
      var parent = g.node().parentElement;
      if(bounds && parent){
        var fullWidth = parent.clientWidth || parent.parentNode.clientWidth,
            fullHeight = parent.clientHeight || parent.parentNode.clientHeight;
        var width = bounds.width,
            height = bounds.height;
        var midX = bounds.x + width / 2,
            midY = bounds.y + height / 2;
        if (width == 0 || height == 0) return; // nothing to fit
        var scale = Math.min((0.95 / Math.max(width / fullWidth, height / fullHeight)), 4);
        var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];

        var transform = d3.zoomIdentity
            .translate(300, translate[1])
            .scale(scale);
        svg.transition().duration(350)
          .call(zoom_handler.transform, transform);
     }

    }

    //Set Default zoom
    svg.call(zoom_handler)
    .call(zoom_handler.transform, d3.zoomIdentity.translate(80, -1000).scale(4));
    this.setState({
            init: false,
        	svg: svg,
        	g: g,
        	treemap: treemap,
        	root: root,
        	duration: duration,
        	zoomFit: zoomFit
        }, ()=>{this.update(this, root, true);})

    // Collapse the node and all it's children
    function collapse(d) {
      if(d.children) {
        d.children.forEach(collapse)
        d.children = null
      }
    }
  }
  
  updateDslPathValueOnExtract=(treeDataChildren)=>{                   
    if(treeDataChildren.details && treeDataChildren.details.dslPathTree && treeDataChildren.details.dslPathTree.length>0){
        for(var x=0;x<treeDataChildren.details.dslPathTree.length;x++){
            let dsl=GeneralCommonFunctions.populatePathDSL(treeDataChildren.details.dslPathTree[x],true,true,this.state.enableRealTime);
            treeDataChildren.details.dslPath.push(dsl);         
        }
    }
    if(treeDataChildren && treeDataChildren.children && treeDataChildren.children.length>0){
        for(var x=0;x<treeDataChildren.children.length;x++){
            treeDataChildren.children[x]=this.updateDslPathValueOnExtract(treeDataChildren.children[x]);
        }
    } 
    return treeDataChildren;   
  }
  onTargetMenuOfFilterTypes=(listname,id)=>{
    console.log(listname+'onTargetMenuOfFilterTypes',id);
    let keysOfArray=id.split('#');
    let nodekey=keysOfArray[0];
    let attrKey=keysOfArray[1];
    let indx=parseInt(keysOfArray[2]);
    let nodeDetails = this.state.nodeDetails;
    let node = nodeDetails[nodekey];
    if(!node.attrDetails){
        node.attrDetails = [];
    }
    if(!node.attrDetails[attrKey]){
        node.attrDetails[attrKey] = {};
        node.attrDetails[attrKey].isSelected = true;
        node.attrDetails[attrKey].filterValue = [];
        node.attrDetails[attrKey].filterType = [];   
    }else{
        let filterTypes=node.attrDetails[attrKey].filterType;
        filterTypes[indx]=listname;
        node.attrDetails[attrKey].filterType=filterTypes;
    }    
    nodeDetails[nodekey] = node;
    // update the state with the new array of traverse to nodes
    this.setState({ nodeDetails: nodeDetails });
  };
  filterTags = (key,property,state) =>{
    let filterTags ='';
    let filters='';
    state=true;//always enable, in future if wants to disable remove this line
    if(APERTURE_SERVICE && this.state.enableRealTime){
        let nodeDetails = this.state.nodeDetails;
        let node = nodeDetails[key];
        filterTags= Object.keys(Object.keys(node.attrDetails[property].filterType)).map((indx) =>{
                    let selectedFilter=(node.attrDetails[property].filterType[indx]!=='')?node.attrDetails[property].filterType[indx]:this.state.filterTypeDisplay;
                    return <div style={{margin:'0px 0px 0px 5px'}}>
                        <label>                                       
                            <FilterTypes param={this.state}
                            selectedFilter={selectedFilter}
                            id={key+'#'+property+'#'+indx}
                            onMenuSelect={this.onTargetMenuOfFilterTypes} 
                            state={!state}/>
                        </label>
                        </div>                        
                    });
        filters= <Col md={4} className='removeLeftPadding'>{filterTags}</Col>;                
    }
    return filters;
  };
  addOrTemplate=(nodeKey,attrKey,indx)=>{
    let nodeDetails = this.state.nodeDetails;
    let node = nodeDetails[nodeKey];
    node.attrDetails[attrKey].filterValue.push('');
    node.attrDetails[attrKey].filterType.push('EQ');
    nodeDetails[nodeKey] = node;
    // update the state with the new array of traverse to nodes
    this.setState({ nodeDetails: nodeDetails });    
  };
  deleteOrTemplate=(nodeKey,attrKey,index)=>{
    let nodeDetails = this.state.nodeDetails;
    let node = nodeDetails[nodeKey];
    let filterValuesArray=node.attrDetails[attrKey].filterValue;
    let filterTypeArray=node.attrDetails[attrKey].filterType;
    filterValuesArray.splice(index,1);
    filterTypeArray.splice(index,1);
    node.attrDetails[attrKey].filterValue=filterValuesArray;
    node.attrDetails[attrKey].filterType=filterTypeArray;
    nodeDetails[nodeKey] = node;
    this.setState({ nodeDetails: nodeDetails });
  }
  toggleRealTimeAnalysisCallback=(checked)=>{
    console.log('toggleRealTimeAnalysisCallback>>>>',checked);
    sessionStorage.setItem(ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);
    this.baseState.enableRealTime=!checked;
    this.baseState.init= true;
    this.setState({...this.baseState},()=>{document.getElementById("DSLBuilder").innerHTML='';});
  }
  renderPathFilterBuilder=(key,dslPath,dslPathTree)=>{
    console.log('renderPathFilterBuilder>>>>',key);
    let attrDetails=this.state.nodeDetails[key].attrDetails; 
    let nodeType=this.state.nodeDetails[key].nodeType; 
    this.setState({showPathFilterDslBuilder: true,pathFilterNodeType: key,pathFilterNodeName:nodeType,pathFIlterAttrDetails: attrDetails,dslPathBuilder: dslPath,dslPathTree:dslPathTree,isEditEnable:false});
  }
  /* Load Functions */
  getAndPopulateTreeFromDSL = (dslQuery) =>{
      var treeObject = [];
      var payload = {dsl: dslQuery};
      settings['ISAPERTURE'] = true;
      commonApi(settings, 'dsl/convert-query-to-tree', 'PUT', payload, 'ConvertQueryToTree')
                          		.then(res => {
                          			console.log('res:' + res.data, 'load');
                          			if(res.status === 200 || res.status === 404){
                          			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){
                          			        this.triggerError(res.data, 'treeLoad');
                          			    }else{
                          			        treeObject = res.data;
                          			        this.setState({
                                               enableTreeLoadBusyFeedback:false,
                                               treeLoadErrMsg: null
                                               });
                                            console.log("TREE OBJECT: " + JSON.stringify(treeObject));
                                            //clear the svg
                                            if(this.state.svg){
                                              this.state.svg.selectAll("*").remove();
                                            }
                                            //set the init state
                                            this.setState({init: true, dslQuery: '', initialRootEdit: false, nodeDetails: [], selectedNode: null });
                                            var initNode = this.extractNodeDetails(treeObject.children[0], true);
                                            if(!this.state.treeLoadErrMsg || this.state.treeLoadErrMsg === ''){
                                                console.log(JSON.stringify(initNode));
                                                this.build(null, null, null, initNode);
                                                setTimeout(() => { this.state.zoomFit() }, 600);
                                                //scroll to the hidden static modal since svg offsetTop doesnt work for DSLBuilder id
                                                GeneralCommonFunctions.scrollTo('customDslBuilderModel');
                                            }else{
                                                this.triggerError(null, 'invalidQuery');
                                            }
                                        }
                                    }else{
                                      this.triggerError(res.data, 'treeLoad');
                                    }
                          		}, error=>{
                          		    if(error.response.status === 404){
                          		        this.setState({enableTreeLoadBusyFeedback:false});
                          		    }else{
                          		        this.triggerError(error.response.data, 'treeLoad');
                          		    }
                          		}).catch(error => {
                          		    this.triggerError(error, 'treeLoad');
                                })

  };
  resetBuilder = () => {
        if(this.state.svg){
  	        this.state.svg.selectAll("*").remove();
  	    }
        this.setState({
                    init: true,
                    dslQuery: '',
                    queryName:'',
                    queryDescription:'',
                    initialRootEdit: false,
                    nodeDetails: [],
                    selectedNode: null,
          	        treeLoadErrMsg: '',
          	        enableTreeLoadBusyFeedback: false,
          	        aggregateObjects: false
                    });
  }
  triggerError = (error, type) => {
    console.error('[CustomDslBuilder.jsx] error : ', JSON.stringify(error));
  	let errMsg = '';
  	if(error && error.status && error.message){
  	    errMsg += "Error Occurred: " + error.status + ' - ' +error.message;
  	}else{
  	    errMsg += "Error Occurred: " + JSON.stringify(error);
  	}
  	console.log(errMsg);
  	if(type === 'treeLoad' || type === 'invalidQuery'){
  	    this.resetBuilder();
  	    var errorMessage = errMsg;
  	    if(type === 'invalidQuery'){
  	         errorMessage = 'The loaded query uses DSL syntax not supported by the DSL Builder,'
                            + ' please only load queries compatible with the builder. For more'
                            + ' information on this error, please contact an administrator.';
  	    }
        this.setState({treeLoadErrMsg: errorMessage});
        GeneralCommonFunctions.scrollTo('treeLoadErrorMessage');
    }else{
        console.log('[CustomDslBuilder.jsx] :: triggerError invoked with invalid type : ' + type);
    }
  }
  validLoadableDSL = (dslQuery) => {
    var valid = false;
    dslQuery = dslQuery.replace(/\s/g, '');
    valid = dslQuery.indexOf(']>') === -1 && !(new RegExp("LIMIT[0-9]+$").test(dslQuery));
    return valid;
  }
  loadCallback = (name, description, category, dslQuery, isAggregate, type, queryId, id, templateDetails, makeCall) =>{
    var decodedDslQuery = atob(dslQuery).replace('<pre>','').replace('</pre>','');
    if(this.validLoadableDSL(decodedDslQuery)){
        if(name !== '' && description !== ''){
          this.setState({
  	        queryName:name,
  	        queryDescription:description,
  	        category:category,
  	        isPublicChecked: type === 'public',
  	        queryId: queryId,
  	        treeLoadErrMsg: null,
  	        aggregateObjects: isAggregate === "true"
          });
          console.log("DSL Query Loaded: "+ decodedDslQuery);
          console.log("DSL Query Name: "+ name);
          console.log("DSL Query Description: "+ description);
          console.log("DSL Query ID: "+ queryId);
          console.log("DSL Query Category: "+ category);
          console.log("DSL Query isAggregate: "+ isAggregate);
          console.log("DSL Query type: "+ type);
          var treeObject = this.getAndPopulateTreeFromDSL(decodedDslQuery);
        }
    }else{
        this.triggerError(null, "invalidQuery");
    }
  }
  extractNodeDetails = (node, isRoot) =>{
    let nodeType =  node['node-type'];
    let nodeData = {
        "name": nodeType,
        "id": nodeType,
        "children": [],
        "details":{}
    }
    nodeData.details.includeInOutput = node.store;
    nodeData.details.isSelected = true;
    nodeData.details.isRootNode = isRoot;
    nodeData.details.nodeType = nodeType;
    var attributes = GeneralCommonFunctions.getFilteringOptions(nodeType);
    nodeData.details.attrDetails = attributes;
    nodeData.details.parentContainer = GeneralCommonFunctions.populateContainer(nodeType);
    if(node.store && !node['requested-props']){
        for(var key in nodeData.details.attrDetails){
            nodeData.details.attrDetails[key].isSelected = true;
        }
    }else if (node.store && node['requested-props']){
         for(var key in node['requested-props']){
            nodeData.details.attrDetails[key].isSelected = true;
            nodeData.details.attrDetails[key].alias=node['requested-props'][key];
         }
    }
    var isValid = true;
    for (var x in node['node-filter']){
        if(isValid){
            for (var y in node['node-filter'][x]) {
                if(isValid){
                    var attrKey = node['node-filter'][x][y]['key'];
                    var filter = node['node-filter'][x][y]['filter'];
                    //If aperture is not turned on and query loaded uses anything besides EQ throw error
                    if(!APERTURE_SERVICE && filter !== 'EQ'){
                        this.triggerError(null, "invalidQuery");
                        isValid = false;
                    }
                    if(!nodeData.details.attrDetails[attrKey]){
                        nodeData.details.attrDetails[attrKey] = {};
                    }
                    if(nodeData.details.attrDetails[attrKey].filterType.length > 0 && nodeData.details.attrDetails[attrKey].filterType[0] === ''){
                        nodeData.details.attrDetails[attrKey].filterType = [];
                    }
                    if(nodeData.details.attrDetails[attrKey].filterValue.length > 0 && nodeData.details.attrDetails[attrKey].filterValue[0] === ''){
                        nodeData.details.attrDetails[attrKey].filterValue = [];
                    }
                    //if a filter had no values associated to it throw a not supported error
                    if(node['node-filter'][x][y]['value'][0]){
                        for (var i in node['node-filter'][x][y]['value']){
                            nodeData.details.attrDetails[attrKey].filterType.push(filter);
                            nodeData.details.attrDetails[attrKey].filterValue.push(node['node-filter'][x][y]['value'][i]);
                        }
                        if(!nodeData.details.attrDetails[attrKey].attributeName){
                            nodeData.details.attrDetails[attrKey].attributeName = attrKey;
                        }
                    }else{
                        this.triggerError(null, "invalidQuery");
                        isValid = false;
                    }
                }
            }
        }
    }
    var initWhereNode = null;
    if(node['where-filter'].length > 0){
        for(var index in node['where-filter']){
            initWhereNode = this.extractNodeDetails(node['where-filter'][index].children[0], true);
        }
    }
    if(initWhereNode){
        nodeData.details.dslPath=[];
        nodeData.details.dslPathTree=[];
        nodeData.details.dslPathTree.push(initWhereNode);
    }
    if(node.children.length > 0){
        for(var i = 0; i < node.children.length; i++){
            nodeData.children[i] = this.extractNodeDetails(node.children[i], false);
        }
    }
    return nodeData;
  }

  setQueriesState = (savedQueries) =>{
    this.setState({
    	loadedQueries: savedQueries
    });
  };
  /* End Load Functions */
  render(){ 
    var toggelRealtimeAnalysis = '';
	if(APERTURE_SERVICE){		
		  toggelRealtimeAnalysis = <div className='toggleSwitch'><BootstrapSwitchButton
									checked={!this.state.enableRealTime}
									onlabel='Real Time'
									onstyle='danger'
									offlabel='Analysis'
									offstyle='success'
									style='w-100 mx-3'
									onChange={(checked) => {
										this.toggleRealTimeAnalysisCallback(checked);
									}}
								/></div>             
	}
	return(
        <div>
            {toggelRealtimeAnalysis}
	       <div className="addPadding">
                <div className='row container-fluid my-4'>
                	<div className='col-lg-9'>
                		<header className='jumbotron'>
                                    <h1 className='display-2'>Visual Query Builder for <strong>B</strong>uild <strong>Y</strong>our <strong>O</strong>wn <strong>Q</strong>uery</h1>
                                    <p className='lead'>
                                        Visually build your own query, you can click the + icon to add objects to your query,
                                        - icon to remove objects from your query, or the pencil icon/double click to edit attributes.
                                        Single click and drag in the view to pan, use scrollwheel or pinch to zoom. <br/>
                                    </p>
                        </header>
                	</div>
                </div>
                <div className={'addPaddingTop alert alert-danger ' +(this.state.treeLoadErrMsg && this.state.treeLoadErrMsg !== '' ? 'show' : 'hidden')} id="treeLoadErrorMessage" role="alert">
                  An error occurred in loading the query. Please see details {this.state.treeLoadErrMsg}
                </div>
                <CustomDSLSaveLoad loadCallback={this.loadCallback} setQueriesState={this.setQueriesState} ref={this.saveLoadComponent} isDataSteward={this.state.isDataSteward} isDSLBuilder={true}/>
                <div className={'row ' + (this.state.init ? 'show' : 'hidden')}>
                    <button className='btn btn-primary' type='button' onClick={this.initialize.bind(this)}>Start Building (+)</button>
                </div>
                <div className={'row ' + (!this.state.init ? 'show' : 'hidden')}>
                    <button className='btn btn-primary' type='button' onClick={this.runDSL}>Run Query</button>
                    <button className='btn btn-outline-secondary' type='button' onClick={this.showEditDSLModal}>Manual Edit & Run</button>
                    <div className={'checkbox ' + (GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                       <label>
                         <input type="checkbox" checked={this.state.aggregateObjects} onChange={this.onAggregateCheckbox.bind(this)} />
                         Aggregate Objects
                       </label>
                       <label>
                         <input type="checkbox" checked={this.state.autoZoomEnabled} onChange={this.onAutoZoomCheckbox.bind(this)} />
                         Auto Zoom Enabled
                       </label>
                    </div>
                </div>

                <div className='static-modal' id='customDslBuilderModel'>
            		<Modal show={this.state.showNodeModal} onHide={this.closeNodeModal}>
            			<Modal.Header>
            				<Modal.Title>Modify Query</Modal.Title>
            			</Modal.Header>
            			    <Modal.Body>
                              <form>
                                   {Object.keys(this.state.nodeDetails).sort().map((key, node) => (
                                        <div className="dsl-panel">
                                           <Panel>
                                             <Panel.Heading>
                                               <Panel.Title>
                                                 <div className={'checkbox ' + (!this.state.init ? 'show' : 'hidden')}>
                                                    <label>
                                                      <input type="checkbox" checked={this.state.nodeDetails[key].isSelected} value={key} onChange={this.onNodeCheckbox.bind(this)} />
                                                      {this.state.nodeDetails[key].nodeType}
                                                    </label>
                                                    <Panel.Toggle>
                                                      <div className="pull-right">Options</div>
                                                    </Panel.Toggle>
                                                 </div>
                                                 <div className={(this.state.init ? 'show' : 'hidden')}>
                                                    <label>
                                                      <input type="radio" value={key} checked={this.state.nodeDetails[key].isSelected} onChange={this.onNodeRadio.bind(this)} />
                                                      {" " + this.state.nodeDetails[key].nodeType}
                                                    </label>
                                                    <Panel.Toggle>
                                                      <div className="pull-right">Options</div>
                                                    </Panel.Toggle>
                                                 </div>
                                               </Panel.Title>
                                             </Panel.Heading>
                                             <Panel.Collapse>
                                               <Panel.Body className='cardwrap'>
                                                 <div>
                                                    <div style={{float:'right'}}>
                                                        <button type='button' className='btn btn-primary pull-right' onClick={()=>this.renderPathFilterBuilder(key)}>Build Path Filter</button>
                                                    </div>
                                                 </div>
                                                 {this.state.nodeDetails[key].dslPath && this.state.nodeDetails[key].dslPath.length>0 &&
                                                  <Grid fluid={true} className='addPaddingTop'>
                                                    <Row className='show-grid addPaddingTop'>
                                                        <Col md={10}>
                                                        <strong>DSL PATH Filter</strong>
                                                        </Col>
                                                        <Col md={2} className='removeLeftPadding'>
                                                            <strong>Action</strong>
                                                        </Col>
                                                    </Row>
                                                  </Grid>}
                                                  <Grid fluid={true}>
                                                 {this.state.nodeDetails[key].dslPath && Object.keys(this.state.nodeDetails[key].dslPath).map((indx) => {
                                                    return(
                                                        <Row className='show-grid'>
                                                            <Col md={9}>
                                                                <div style={{float:'left',width:'100%',margin:'10px 0px'}}>
                                                                    {this.state.nodeDetails[key].dslPath[indx]}
                                                                </div>
                                                            </Col>
                                                            <Col md={3}>
                                                                     <button
                                                                        className='btn btn-primary'
                                                                        style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                                        type='button'
                                                                        onClick={e => {this.editPathNodeModal(key,this.state.nodeDetails[key].dslPath[indx],this.state.nodeDetails[key].dslPathTree[indx],indx)}}>Edit</button>
                                                                    <button
                                                                        className='btn btn-primary'
                                                                        style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                                        type='button'
                                                                        onClick={e => {this.deletePathNodeModal(key,this.state.nodeDetails[key].dslPath[indx],this.state.nodeDetails[key].dslPathTree[indx],indx)}}>Delete</button>
                                                            </Col>
                                                        </Row>
                                                    )
                                                 })}
                                                 </Grid>
                                                 <div style={{float:'left'}} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                                        <button type='button' className='btn btn-outline-primary pull-right' onClick={()=>this.deselectAll(key)}>Deselect All</button>
                                                        <button type='button' className='btn btn-primary pull-right' onClick={()=>this.selectAll(key)}>Select All</button>
                                                </div>
                                                 <Grid fluid={true} className='addPaddingTop'>
                                                    <Row className='show-grid addPaddingTop'>
                                                       <Col md={(this.state.enableRealTime)?4:6} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                                         <strong>Include in Output</strong>
                                                       </Col>
                                                       {APERTURE_SERVICE && this.state.enableRealTime && <Col md={4} className='removeLeftPadding'>
                                                         <strong>Filter Types</strong>
                                                       </Col>}
                                                       <Col md={(this.state.enableRealTime)?4:6} className='removeLeftPadding'>
                                                          <strong>Filter By (Optional)</strong>
                                                       </Col>
                                                    </Row>
                                                 {Object.keys(this.state.nodeDetails[key].attrDetails).sort().map((attrKey, attr) => {
                                                    return(
                                                           <Row className='show-grid'>
                                                              <Col md={(this.state.enableRealTime)?4:6} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                                               <div className="checkbox">
                                                                   <label>
                                                                     <input type="checkbox" checked={this.state.nodeDetails[key].attrDetails
                                                                     && this.state.nodeDetails[key].attrDetails[attrKey]
                                                                     && this.state.nodeDetails[key].attrDetails[attrKey].isSelected }
                                                                     value={key + "|" + attrKey} onChange={this.onAttributeCheckbox.bind(this)} />
                                                                     {attrKey}
                                                                   </label>
                                                                </div>
                                                              </Col>
                                                              {this.filterTags(key,attrKey,this.state.nodeDetails[key].attrDetails[attrKey].isSelected)}
                                                              <Col md={(this.state.enableRealTime)?4:6} className='removeLeftPadding'>
                                                              {Object.keys(this.state.nodeDetails[key].attrDetails[attrKey].filterValue).map((indx) =>{
                                                                return(
                                                                    <div>
						    			{this.state.nodeDetails[key].attrDetails[attrKey].filterValue[indx] ==='' && <input type="text"
                                                                            placeholder={"Enter " + attrKey }
                                                                            className='inputFilter'
                                                                            onBlur={(e)=>{this.onFilterValueChange(e, key, attrKey,indx);}}
                                                                            />
                                                                        }
                                                                        {this.state.nodeDetails[key].attrDetails[attrKey].filterValue[indx] !=='' && <input type="text"
                                                                            onChange={(e)=>{this.onFilterValueChange(e, key, attrKey,indx);}}
                                                                            placeholder={"Enter " + attrKey }
                                                                            className='inputFilter'
                                                                            value={this.state.nodeDetails[key].attrDetails[attrKey].filterValue[indx]}
                                                                            />
                                                                        }
                                                                        {indx == 0 && <button
                                                                            className={(this.state.nodeDetails[key].attrDetails[attrKey].filterValue[indx] !=='')?'btn btn-primary':'btn btn-secondary'}
                                                                            style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                                            disabled={this.state.nodeDetails[key].attrDetails[attrKey].filterValue[indx]===''}
                                                                            type='button'
                                                                            onClick={e => {this.addOrTemplate(key,attrKey,indx)}}>+</button>}
                                                                        {indx > 0 && <button
                                                                            style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                                            id={'delete-'+indx}
                                                                            className='btn btn-danger'
                                                                            type='button'
                                                                            onClick={e => {this.deleteOrTemplate(key,attrKey,indx)}}>x</button>}

                                                                    </div>
                                                                )
                                                              })}

                                                              </Col>
                                                           </Row>
                                                    );
                                                  }
                                                 )}
                                                 </Grid>
                                               </Panel.Body>
                                             </Panel.Collapse>
                                           </Panel>
                                        </div>
                                   ))}
                                 </form>
                                 <div className={this.state.showPathFilterDslBuilder ? 'show' : 'hidden'}>
                                    <Modal show={this.state.showPathFilterDslBuilder} onHide={!this.state.showPathFilterDslBuilder} style={{width:'100%'}}>
                                        <Modal.Header>
                                            <Modal.Title>Build DSL Path</Modal.Title>
                                        </Modal.Header>
                                        <Modal.Body style={{overflow:'scroll'}}>
                                            <PathFilterDslBuilder  nodeType={this.state.pathFilterNodeType}
                                                                nodeName={this.state.pathFilterNodeName}
                                                                attrDetails={this.state.pathFIlterAttrDetails}
                                                                closePathNodeModal={this.closePathNodeModal}
                                                                submitPathNodeModal={this.submitPathNodeModal}
                                                                showPathFilterDslBuilder={this.state.showPathFilterDslBuilder}
                                                                dslPath={this.state.dslPathBuilder}
                                                                dslPathTree={this.state.dslPathTree}
                                                                isEditEnable={this.state.isEditEnable}
                                                                pathFilterIndex={this.state.pathFilterIndex}/>
                                        </Modal.Body>
                                    </Modal>
                                </div>
            			    </Modal.Body>
            			    <Modal.Footer>
            			    	<Button onClick={this.closeNodeModal}>Close</Button>
            			    	<Button onClick={this.submitNodeModal}>Submit</Button>
            			    </Modal.Footer>
            		</Modal>
                </div>
                <div className='static-modal' id='editNodeModel'>
                	<Modal show={this.state.showEditNodeModal} onHide={this.closeEditNodeModal}>
                		<Modal.Header>
                			<Modal.Title>Modify Node</Modal.Title>
                		</Modal.Header>
                		<Modal.Body>
                          <form>
                            <div className="dsl-panel">
                               <Panel>
                                 <Panel.Heading>
                                   <Panel.Title>
                                     <div>
                                        <label>{this.state.selectedNode
                                                && this.state.selectedNode.data
                                                && this.state.selectedNode.data.details ?
                                                this.state.selectedNode.data.details.nodeType
                                                : ""
                                               }
                                        </label>
                                     </div>
                                   </Panel.Title>
                                 </Panel.Heading>
                                 <Panel.Body className='cardwrap'>                                
                                    <Grid fluid={true} className='addPaddingTop'>
                                    <Row className='show-grid addPaddingTop'>
                                        <div style={{float:'right'}}>
                                            <button type='button' className='btn btn-primary pull-right' onClick={()=>this.renderPathFilterBuilder(0)}>Build Path Filter</button>
                                        </div>
                                    </Row>
                                    {this.state.selectedNode
                                        && this.state.selectedNode.data
                                        && this.state.selectedNode.data.details
                                        && this.state.nodeDetails[0]
                                        && this.state.nodeDetails[0].dslPath && this.state.nodeDetails[0].dslPath.length>0 && 
                                    <Row className='show-grid addPaddingTop'>
                                        <Col md={10}>
                                        <strong>DSL PATH Filter</strong>
                                        </Col>                                                
                                        <Col md={2} className='removeLeftPadding'>
                                            <strong>Action</strong>
                                        </Col>
                                    </Row>}
                                    </Grid>                                                                                                                                 
                                    {this.state.selectedNode
                                        && this.state.selectedNode.data
                                        && this.state.selectedNode.data.details
                                        && this.state.nodeDetails[0]
                                        && this.state.nodeDetails[0].dslPath && Object.keys(this.state.nodeDetails[0].dslPath).map((indx) => {
                                    return(
                                        <Row className='show-grid'>
                                            <Col md={9}>
                                                <div style={{float:'left',width:'100%',margin:'10px 0px'}}>
                                                    {this.state.nodeDetails[0].dslPath[indx]}
                                                </div>
                                            </Col>
                                            <Col md={3}>
                                                        <button 
                                                        className='btn btn-primary'
                                                        style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                        type='button' 
                                                        onClick={e => {this.editPathNodeModal(0,this.state.nodeDetails[0].dslPath[indx],this.state.nodeDetails[0].dslPathTree[indx],indx)}}>Edit</button>
                                                    <button 
                                                        className='btn btn-primary'
                                                        style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                        type='button' 
                                                        onClick={e => {this.deletePathNodeModal(0,this.state.nodeDetails[0].dslPath[indx],this.state.nodeDetails[0].dslPathTree[indx],indx)}}>Delete</button>
                                            </Col>
                                        </Row>
                                    )
                                    })}
                                    <div style={{float:'left'}} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                        <button type='button' className='btn btn-outline-primary pull-right' onClick={()=>this.deselectAll(0)}>Deselect All</button>
                                        <button type='button' className='btn btn-primary pull-right' onClick={()=>this.selectAll(0)}>Select All</button>
                                    </div>
                                   <Grid fluid={true} className='addPaddingTop'>
                                      <Row className='show-grid addPaddingTop'>
                                         <Col md={(this.state.enableRealTime)?4:6} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                           <strong>Include in Output</strong>
                                         </Col>
                                         {this.state.enableRealTime && <Col md={4} className='removeLeftPadding'>
                                           <strong>Filter Types</strong>
                                         </Col>}
                                         <Col md={(this.state.enableRealTime)?4:6} className='removeLeftPadding'>
                                            <strong>Filter By (Optional)</strong>
                                         </Col>
                                      </Row>
                                   {this.state.selectedNode
                                        && this.state.selectedNode.data
                                        && this.state.selectedNode.data.details
                                        && this.state.nodeDetails[0]
                                        && Object.keys(this.state.nodeDetails[0].attrDetails).sort().map((attrKey, attr) => {
                                      return(
                                             <Row className='show-grid'>
                                                <Col md={(this.state.enableRealTime)?4:6} className={(GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                                                 <div className="checkbox">
                                                     <label>
                                                       <input type="checkbox" checked={this.state.nodeDetails[0].attrDetails
                                                       && this.state.nodeDetails[0].attrDetails[attrKey]
                                                       && this.state.nodeDetails[0].attrDetails[attrKey].isSelected }
                                                       value={0 + "|" + attrKey} onChange={this.onAttributeCheckbox.bind(this)} />
                                                       {attrKey}
                                                     </label>
                                                  </div>
                                                </Col>
                                                {this.filterTags(0,attrKey, this.state.nodeDetails[0].attrDetails[attrKey].isSelected)}
                                                <Col md={(this.state.enableRealTime)?4:6} className='removeLeftPadding'>
                                                {Object.keys(this.state.nodeDetails[0].attrDetails[attrKey].filterValue).map((indx) =>{
                                                  return(
                                                      <div>
                                                          
                                                          {this.state.nodeDetails[0].attrDetails[attrKey].filterValue[indx] ==='' && <input type="text"
                                                              placeholder={"Enter " + attrKey }
                                                              className='inputFilter'
                                                              onBlur={(e)=>{this.onFilterValueChange(e, 0, attrKey, indx);}}
                                                              />
                                                          }
                                                          {this.state.nodeDetails[0].attrDetails[attrKey].filterValue[indx] !=='' && <input type="text"
                                                              onChange={(e)=>{this.onFilterValueChange(e, 0, attrKey,indx);}}
                                                              placeholder={"Enter " + attrKey }
                                                              className='inputFilter'
                                                              value={this.state.nodeDetails[0].attrDetails[attrKey].filterValue[indx]}
                                                              />
                                                          }
                                                          {indx == 0 && <button
                                                              className={(this.state.nodeDetails[0].attrDetails[attrKey].filterValue[indx]!=='')?'btn btn-primary':'btn btn-secondary'}
                                                              style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                              disabled={this.state.nodeDetails[0].attrDetails[attrKey].filterValue[indx]===''}
                                                              type='button'
                                                              onClick={e => {this.addOrTemplate(0 ,attrKey,indx)}}>+</button>}
                                                          {indx > 0 && <button
                                                              style={{padding:'2px',margin:'0px 0px 7px 3px'}}
                                                              id={'delete-'+indx}
                                                              className='btn btn-danger'
                                                              type='button'
                                                              onClick={e => {this.deleteOrTemplate(0 ,attrKey,indx)}}>x</button>}

                                                      </div>
                                                  )
                                                })}

                                                </Col>
                                             </Row>
                                      );
                                    }
                                   )}
                                   </Grid>
                                 </Panel.Body>
                               </Panel>
                            </div>
                          </form>                          
                          <div className={(this.state.showPathFilterDslBuilder && this.state.showEditNodeModal) ? 'show' : 'hidden'}>
                                <Modal show={this.state.showPathFilterDslBuilder} onHide={!this.state.showPathFilterDslBuilder} style={{width:'100%'}}>
                                    <Modal.Header>
                                        <Modal.Title>Build DSL Path</Modal.Title>
                                    </Modal.Header>
                                    <Modal.Body style={{overflow:'scroll'}}>
                                        <PathFilterDslBuilder  nodeType={this.state.pathFilterNodeType}
                                                            nodeName={this.state.pathFilterNodeName}
                                                            attrDetails={this.state.pathFIlterAttrDetails}
                                                            closePathNodeModal={this.closePathNodeModal}
                                                            submitPathNodeModal={this.submitPathNodeModal}
                                                            showPathFilterDslBuilder={this.state.showPathFilterDslBuilder}
                                                            dslPath={this.state.dslPathBuilder}
                                                            dslPathTree={this.state.dslPathTree}
                                                            isEditEnable={this.state.isEditEnable}
                                                            pathFilterIndex={this.state.pathFilterIndex}/>
                                    </Modal.Body>
                                </Modal> 
                           </div> 
                		</Modal.Body>
                		<Modal.Footer>
                			<Button onClick={this.closeEditNodeModal}>Close</Button>
                			<Button onClick={this.submitEditNodeModal}>Submit</Button>
                		</Modal.Footer>
                	</Modal>
                </div>
                <div className='static-modal'>
                	<Modal show={this.state.showEditModal} onHide={this.closeEditDSLModal}>
                		<Modal.Header>
                			<Modal.Title>Edit DSL Query</Modal.Title>
                		</Modal.Header>
                		<Modal.Body>
                            <form>
                                <FormGroup controlId="dslQuery">
                                      <ControlLabel>DSL Query</ControlLabel>
                                      <FormControl onChange={this.bindEdits.bind(this)} value={this.state.editModel} componentClass="textarea" placeholder="Enter DSL Query" />
                                 </FormGroup>
                            </form>
                		</Modal.Body>
                		<Modal.Footer>
                			<Button onClick={this.closeEditDSLModal}>Close</Button>
                			<Button onClick={this.submitEditAndRunDSL}>Submit</Button>
                		</Modal.Footer>
                	</Modal>
                </div>
                <div>
                    <div className={'card-header ' + (this.state.queryName && this.state.queryName !== '' ? 'show' : 'hidden')}>
                    	<div>
                    		<h3>{this.state.queryName}</h3>
                    	</div>
                    </div>
                    <div className={'card-header ' + (this.state.queryDescription && this.state.queryDescription !== ''  ? 'show' : 'hidden')}>
                    	<div>
                    		<h4>{this.state.queryDescription}</h4>
                    	</div>
                    </div>
                    <div className={'card-header ' + (this.state.dslQuery && this.state.dslQuery !== ''  ? 'show' : 'hidden')}>
                    	<div>
                    		<h4><strong>DSL Query: </strong><span className='pre-wrap-text'>{this.state.dslQuery}</span></h4>
                    	</div>
                    </div>
                </div>
                {this.state.enableModalFeedback && <Spinner loading={true}><span height="100%" width="100%"></span></Spinner>}
                <svg id='DSLBuilder' width='1800' height='800'></svg>
           </div>
        </div>
	);
  }
}

export default CustomDslBuilder;