/*
 * ============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 PanelGroup from 'react-bootstrap/lib/PanelGroup';
import Panel from 'react-bootstrap/lib/Panel';
import Modal from 'react-bootstrap/lib/Modal';
import Grid from 'react-bootstrap/lib/Grid';
import Button from 'react-bootstrap/lib/Button';
import ModelGallery from 'app/model/modelSearch/components/ModelGallery.jsx';
import Autosuggest from 'react-autosuggest';
import DatePicker from 'react-datepicker';
import moment from "moment";
import DslHints from 'app/assets/configuration/dsl_hints.json';
import DslDetailedHelp from 'app/assets/configuration/dsl_detailedHelp.json';
import {ExportExcel} from 'utils/ExportExcel.js';
import commonApi from 'utils/CommonAPIService.js';
import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
import {GeneralCommonFunctions} from 'utils/GeneralCommonFunctions.js';
import Spinner from 'utils/SpinnerContainer.jsx';
import OutputToggle from 'generic-components/OutputToggle.jsx';
import Pagination from 'react-js-pagination';
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import OutputVisualization, {Visualization} from 'generic-components/OutputVisualization.jsx';
import ModelCard from 'app/model/modelSearch/components/ModelCard.jsx';
import CustomDSLSaveLoad from 'app/byoq/CustomDSLSaveLoad.jsx';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import InfoToggle from 'generic-components/InfoToggle.jsx';
import Alert from 'react-bootstrap/lib/Alert';
import Tabs from 'react-bootstrap/lib/Tabs';
import Tab from 'react-bootstrap/lib/Tab';
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, {textFilter,customFilter} from 'react-bootstrap-table2-filter';
import FilterTypes from 'generic-components/filter/components/FilterTypes.jsx';
import DownloadRangeModel from 'generic-components/DownloadRangeModel.jsx';
import SelectFilter from 'generic-components/filter/components/SelectFilter.jsx';
import Toggle from 'react-toggle';
import "react-toggle/style.css";
import BootstrapSwitchButton from 'bootstrap-switch-button-react';

let PAGINATION_CONSTANT = GlobalExtConstants.PAGINATION_CONSTANT;
let EDGERULES = GlobalExtConstants.EDGERULES;
let OXM = GlobalExtConstants.OXM;
let INVLIST = GlobalExtConstants.INVLIST;
let generateExcels = ExportExcel.generateExcels;
let DOWNLOAD_ALL = GlobalExtConstants.DOWNLOAD_ALL;
let DOWNLOAD_TOOLTIP = GlobalExtConstants.DOWNLOAD_TOOLTIP;
let filterTypeList = GlobalExtConstants.FILTER_TYPES;
let TABULAR_FILTER_TYPE = GlobalExtConstants.TABULAR_FILTER_TYPE;
let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
let EMAIL_EXT = GlobalExtConstants.EMAIL_EXT;
let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
let buildAttrList = ExportExcel.buildAttrList;

let dslHints = null;
let nodeTypes = [];
let properties = null;
let traverseRulesDsl = [];
let inputValue = '';
let testData = null;

var settings = {
	'NODESERVER': INVLIST.NODESERVER,
	'PROXY': INVLIST.PROXY,
  	'PREFIX': INVLIST.PREFIX,
  	'VERSION': INVLIST.VERSION,
	'USESTUBS': INVLIST.useStubs,
	'APERTURE': INVLIST.APERTURE,
	'TABULAR': INVLIST.TABULAR,
	'TABULARVERSION': INVLIST.TABULARVERSION
};
class AttributeFilter extends Component {
  
	constructor(props) {
	  super(props);	  	  
	  this.filter = this.filter.bind(this);
	  this.getValue = this.getValue.bind(this);
	  this.props = props;
	  this.state = {
		filterText: '',
		isPageChange: this.props.isPageChange,
		columnValue : ''
	  };
	}
	getValue = () => {
	  return this.input.value;
	}
	setPlaceHolder = () => {
	  let filterText = '';
	  filterText = 'Enter ' + this.props.column.text;
	  return filterText;
	}
	filter = () => {
	  let txt=this.props.column.text;
	  let obj = {};
	  obj[txt] = this.getValue();
	  var columnFilter = this.props.columnFilter; 
	 for(var i=0;i<columnFilter.length;i++){
		if(columnFilter[i][txt] != undefined){
		  columnFilter[i][txt] = this.getValue();
		  this.props.handleOnFilter(columnFilter,this.getValue());
		  this.props.onFilter(this.getValue());
		}
	  }
	}
	render() {
	  return (
		<div>
		  
			<input
			key="input"
			ref={ node => this.input = node }
			type="text"
			  placeholder={this.setPlaceHolder()}
			  onChange={this.filter}
			/>
		  
		</div>
	  )
	}
  }
  
class CustomDsl extends Component {
	nodeResults = '';
	typeOfCall = true;
	downloadTooltip = DOWNLOAD_TOOLTIP;
	downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
	downloadRangeTooltip= 'Download Results By Custom Range Selection';
	downloadBulkTooltip= 'Download Results Of All Loaded Queries';
	historyStackString = '';
	dslObject={};
	dslObjectList=[];
	nodeTypeArray=[];
	nodeTypeArrayList=[];
	edgesArray=[];
	relationsArray=[];
	tempDslQuery='';
	tempDslQueryList=[];
	templateError=[];
	templateErrorList={};
	baseState='';
	propertiesDsl = [];
	tableFilterAliasColumns={};
	constructor(props) {
		console.log('CustomDsl:Constuctor props>>>>',props);
		super(props);
		APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
    console.log('APERTURE_SERVICE: ' + APERTURE_SERVICE);
			TABULAR_FILTER_TYPE=(APERTURE_SERVICE && JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'ENABLE_ANALYSIS')))?'CONTAINS':'=';
	    this.saveLoadComponent = React.createRef();
		this.saveLoadComponentDsl = React.createRef();
		this.state = {
			nodeTypes: [],
			hintHtml: {},
			header: null,
			multipleNodes: '',
			isLoading: false,
			nodes: [],
			simpleQueries: [],
			traversalQueries: [],
			unionQueries: [],
			negationQueries: [],
			topologyQueries: [],
			limitQueries: [],
      advancedQueries: [],
			showModal: false,
			query: '',
			value: '',
			valuePreviousState: '',
			suggestions: [],
			edgeRules: [],
			previousNodeTypeDsl: '',
			selected: [],
			nodeTypeDsl: '',
			model: null,
			showPagination: false,
			showResults: false,
			activePage: 1,
			aggregateActivePage: 1,
			totalResults: 0,
			errorResults: false,
			errorMessage: '',
			noResults: true,
			validInput: false,
			isInitialLoad: true,
			prevQuery : '',
			showHistoryModal:false,
			startDate: moment(),
            res: null,
            visualAddition: false,
            nodeDisplay: '',
            showNodeModal: false,
            focusedNode: {},
	    	historyType: 'dsl',
      		focusedNodeUri: 0,
			viewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference')  || 'CardLayout',
			focusedNodeType: '',
			historyParams: '' , 
			showModelOptions:false,
			enableCalendar: true,
			resetColumnFilters: true,
			isPageNumberChange: false,
			loadedQueries: [],
			queryDescription: '',
			queryName: '',			
			category:'',
			saveSuccessfulMsg: false,
			saveErrorMsg: false,
			enableSaveBusyFeedback: false,
			isAggregate: false,
			isAggregatePreviousState: false,
			isAggregateChecked: false,
			isCommunitySharedPreviousState: false,
			isCommunitySharedChecked: false,
			associatedNodesEnabled: false,
			associatedNodesEnabledPreviuosState: false,
			aggregatePaths: [],
			aggregatePathAttrs: [],
			aggregateParentGroup: [],
			aggregateObjects: [],
			tabularAggregateColumns: [],
			tabularAggregateData: [],
			aggregateAttrList: [],
			aggregateNodes: [],
			allAggregateNodes: [],
			allres: null,
			allAggregatePaths: [],
			allAggregatePathAttrs: [],
			allAggregateObjects: [],
			allAggregateParentGroup: [],
			allTabularAggregateColumns: [],
			allTabularAggregateData: [],
			allAggregateAttrList: [],
			reRender: false,
			columnFilter: [],
			filterTemplateEntries: [],
			filterTemplateHeader: [],
			filterTemplateError: false,
			filterTemplateEntriesList:[],
	  		filterTemplateHeaderList:[],
			filterTemplateErrorList:[],
			nodeTypeOfDslTemplateList:[],
			valueList:[],
			templateQueryList:[],
            editModel: {},
            showEditModal: false,
            templateQuery: '',
            isDSLFlow: props.viewName === 'BYOQ',
			isSavedQueryFlow: props.viewName === 'Saved Queries',
			filterTypeDisplay: {'default':'Filter Type'},
			filterTypeDisplayList: [],
			disableFilter: true,
			totalPages: 0,
			pageRange: 1,
			showDownloadResultsModal: false,
			errorDownloadResults:false,
			downloadErrorMsg: '',      
			enableModelBusyFeedback:false,
			downloadCount:DOWNLOAD_ALL,
			addAndTemplateState:false,
			nodeTypeOfDslTemplate:[],
			filterDisplay:'Select Property',
			queryId:'',
			queryNameList: [],
			queryDescriptionList: [],
			categoryList: [],
			isPublicCheckedList: [],
			isCommunitySharedList: [],
			queryIdList: [],
			isAggregateCheckedList:[],
			associatedNodesEnabledList: [],
			associatedNodesEnabledPreviuosStateList: [],
			enableTreeLoadBusyFeedback: false,
            treeLoadErrMsg: null,
			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,
			defaultViewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference')  || 'CardLayout',
      		isTypeahead: true,
			enableRealTime: JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'ENABLE_ANALYSIS')),
			downloadTemplateStatus:false,
			failedDownloadedTemplate:[],
			failedDownloadedTemplateMsg:'',
			failedEmailTemplateMsg:'',
			isMergedTabsChecked:false,
			isGenerateEmailChecked: false,
			emailTriggerMsg:'',
			dslConfigArray: [],
			staticTemplateFilters: [],
            staticTemplateFiltersList: [],
	    tableAggregateAliasColumns:{}
		}
	}
  componentWillMount = () => {
    console.log('CustomDsl:componentWillMount',JSON.stringify(this.props));
	if(!this.props.location.historyStackString){
		this.props.location.historyStackString = this.props.location.pathname + ',,Origin||';
	}else{
		this.historyStackString = this.props.location.historyStackString;
	}
	dslHints = Object.values(DslHints);
	this.setState( {hintHtml: dslHints});
	this.processHelp( DslDetailedHelp );
	console.log('how many nodes? ' + this.state.nodes.length);
	this.processEdgeRules(EDGERULES);
	nodeTypes = this.buildNodeList();		
	this.setState({
		nodeTypes: nodeTypes},
		function () {
			console.log('nodeTypes: ' + this.state.nodeTypes.length) ;
			this.baseState=this.state;
			this.buildDynamicByoq('','','init');
		}
	);	
		
 }
 buildDynamicByoq=(queryParam, makeCall, loadType)=> {
    let query = '';
    let shouldRun = makeCall;
    if(queryParam){
       query = queryParam;
    }else if(this.props.match.params.type === 'built' || this.props.match.params.type === 'built-aggregate'){
       query = atob(this.props.match.params.propId).replace('<pre>','').replace('</pre>','');
       shouldRun = true;
    }else{
        shouldRun = true;
		let nodeType =  (this.props.match.params.type) ? this.props.match.params.type : '';
		let propIds = (this.props.match.params.propId) ? this.props.match.params.propId.split(';') : '';
		let propertyValue = '';
		for(var i  in propIds){
			let propValue = propIds[i].split(':');
			console.log(propValue[0] + '....' + propValue[1]);
			let atobPropValue = atob(propValue[1]).replace('<pre>','').replace('</pre>','');
			if(propertyValue == ''){
				propertyValue ='(\'' + propValue[0] +'\',\''+ atobPropValue + '\')';
			}else{
				propertyValue = propertyValue + '(\'' + propValue[0] +'\',\''+ atobPropValue + '\')';
			}			
		}
		console.log('propertyValue>>>>>',propertyValue);
	    let relArray = (this.props.match.params.relArray) ? this.props.match.params.relArray.split('&') : '';
	    let relativeStr = '';
	    let str = '';
	    if(relArray.length>0){
	    	for(var n in relArray){
	    		relativeStr = relativeStr + relArray[n] + '*'
	    	}
	    	str = relativeStr.replace(/\*/g, '*,').slice(0, -1);
	    }
	    let relativeAttachStr = (str === '') ? '' : '>[' + str + ']';
	    //encPropValue = (nodeType === '') ? '': atob(propValue[1]);
		query = (nodeType === '') ? '' : nodeType + '*' + propertyValue + relativeAttachStr;
		if(loadType ==='init'){
			console.log('this.baseState>>>>>',this.baseState)
			this.baseState.value=query;
		}		
	}
	console.log('query>>>',query);
	console.log('this.props.match.params.type>>>',this.props.match.params.type);
	if(query != ''){
		this.nodeResults = '';
		this.typeOfCall = true;
		let isInitialLoad = this.state.isInitialLoad;
		this.setState( {value: query,validInput: true,isInitialLoad: false},() => { if(shouldRun){this.formQueryString(false, isInitialLoad,false)}});
	} 
}
  getNodeTypes = () =>{
    var result = JSON.parse(OXM);
    var arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
    var nodeTypeArray = [];
    for(var j = 0; j < arrayOfTypes.length; j++){
        if(arrayOfTypes[j]['xml-root-element'] && arrayOfTypes[j]['xml-root-element'][0]
            && arrayOfTypes[j]['xml-root-element'][0]['$'] && arrayOfTypes[j]['xml-root-element'][0]['$']['name']){
            nodeTypeArray.push((arrayOfTypes[j]['xml-root-element'][0]['$']['name']).toLowerCase());
        }
    }
    return nodeTypeArray;
  }

  getNodeTypeFromURI = (uri) => {
    var nodeTypeArray = this.getNodeTypes();
    var tokenizedUri = uri.split("/");
    var nodeType = "";
    var found = false;
    for (var i = tokenizedUri.length - 1; i >= 0 && !found; i--){
        if(nodeTypeArray.indexOf(tokenizedUri[i]) > -1){
            nodeType = tokenizedUri[i];
            found = true;
        }
    }
    return nodeType;
  }

  getAttributesFromNodeType = (nt) => {
    var result = JSON.parse(OXM);
    var arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
    var foundIndex = -1;
    var attributesArray = [];
    var nodeType = nt.replace(/-/g,'');
  	for (var i = 0; i < arrayOfTypes.length && foundIndex === -1; i++) {
  		if(arrayOfTypes[i]['$'] && arrayOfTypes[i]['$']['name'] && arrayOfTypes[i]['$']['name'].toLowerCase() === nodeType){
  		    foundIndex = i;
  		}
  	}
    for (var j = 0; j < arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'].length; j++) {
    	let property =  arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['name'];
    	let type = arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['type'];
    	if (type === 'java.lang.String' || type === 'java.lang.Boolean') {
    	    attributesArray.push(property);
    	}
    }
    return attributesArray;
  }
 
  getAttributesFromPath = (path,tableAggregateAliasColumns) => {
     var nodeParseArray = path.split('>');
    console.log(nodeParseArray);
    var attributeArray = [];
    var aggregatePaths = this.state.aggregatePathAttrs;
    if(!this.typeOfCall){
        aggregatePaths = this.state.allAggregatePathAttrs;
    }
    for(var i = 0; i < nodeParseArray.length; i++){
		var nodeKey = nodeParseArray[i].trim();	
		let tableColumnsBuilt = ExportExcel.buildAttrList(nodeKey,[],'required');
        for(var j = 0; j <  aggregatePaths[nodeKey].length; j++){
			let desc=tableColumnsBuilt.map((a) => 
			{
				if(a.value.toLowerCase()==aggregatePaths[nodeKey][j].toLowerCase())
				  return a.description;
				else
				  return '';
			}).filter(function (el) {
				return el != '';
			});
			if(desc.length===0){
				desc.push('');
			}
			if(Object.keys(tableAggregateAliasColumns).length !== 0 && tableAggregateAliasColumns[nodeKey] && tableAggregateAliasColumns[nodeKey][0][aggregatePaths[nodeKey][j]]){
				attributeArray.push(nodeKey + '|' + tableAggregateAliasColumns[nodeKey][0][aggregatePaths[nodeKey][j]] +'|'+ desc[0]);
			}else{
				attributeArray.push(nodeKey + '|' + aggregatePaths[nodeKey][j] + '|' + desc[0]);
			}
        }
    }
    return attributeArray;
  }

  buildNodeList = () => {
		var result = JSON.parse(OXM);
		var arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
		let nodeList = [];

		for (var i = 0; i < arrayOfTypes.length; i++) {
			var hasProperties = false;
			if (arrayOfTypes[i]['java-attributes']) {
			    let elementLength = 0;
			    if (arrayOfTypes[i]['java-attributes'][0]['xml-element']) {
			    	elementLength = arrayOfTypes[i]['java-attributes'][0]['xml-element'].length;
			    }
			    for (var j = 0; j < elementLength; j++) {
			    	let property = JSON.stringify(arrayOfTypes[i]['java-attributes'][0]['xml-element'][j]['xml-properties']);
			    	if (property) { //add to the list
			    	hasProperties = true;
			    	}
			    }
			    if (hasProperties) {
			    	let node = arrayOfTypes[i]['xml-root-element'][0]['$']['name'];
			    	nodeList.push(node);
			    }
			}
		}
		nodeList.sort();
		return nodeList;
  }

  processHelp(data) {
		//console.log('Data' + JSON.stringify(data));
		this.setState( {simpleQueries: data.simple } );
		console.log('Value' + JSON.stringify(this.state.simpleQueries));
		this.setState( {traversalQueries: data.traversal} );
		this.setState( {unionQueries: data.union} );
		this.setState( {negationQueries: data.negation} );
		this.setState( {topologyQueries: data.topology} );
		this.setState( {limitQueries: data.limit} );
    this.setState( {advancedQueries: data.advanced} );
  }

  processEdgeRules = (data) => {
		var ruleArr = [];
		this.setState({
			edgeRules: data.rules
		});
		ruleArr = data.rules;
		// console.log("Rule"+JSON.stringify(ruleArr));
		// new = data.Rules;
  }

  hint = () => { // open modal
    console.log('hint >> showModal');
    this.setState({
		  showModal:true
    });
    this.hints = this.state.html;
  }

  onAddItem = (event) => {
	  event.preventDefault();
	  GeneralCommonFunctions.scrollTo("outputBlock");
      this.nodeResults = '';
      this.typeOfCall = true;
      this.setState({ viewName: this.state.defaultViewName, aggregateActivePage: 1, activePage: 1, nodes: [], aggregateNodes: [],errorResults:false},function () { this.formQueryString(false,false,false); }.bind(this));
  };

  formQueryString = (bypassCall, isInitialLoad, aggregateForGraph) =>{
		console.log('formQueryString>>>>>>this.state.value :',this.state.value);
		var DSLQuery = this.state.value;
		DSLQuery.trim();
		console.log('DSLQuery.trim().length: ' + DSLQuery.trim().length);
		let resp = '';
		if (DSLQuery.trim() !== '' || (this.props.match.params.type && DSLQuery.trim() !== '')){
			console.log('validInput.DSLQuery: ' + DSLQuery);
			this.setState({
			    validInput: true,isInitialLoad: isInitialLoad
			});
			const payload = {dsl: DSLQuery};
			let format = 'simple';
			if((this.state.isAggregateChecked || (isInitialLoad && this.props.match.params.type === 'built-aggregate')) && !aggregateForGraph){
			    format = 'aggregate';
			    this.setState({isAggregateChecked: true});
			}
			let queryStr = '';
			if(this.typeOfCall){
			    if(format === 'aggregate' || aggregateForGraph){
			        this.setState({isAggregate: true});
			        queryStr = 'dsl?format=' + format + '&resultIndex=' + this.state.aggregateActivePage + '&resultSize=' + PAGINATION_CONSTANT.RESULTS_PER_PAGE;
			    }else{
			        this.setState({isAggregate: false});
			        queryStr = 'dsl?format=' + format + '&resultIndex='
                			                + this.state.activePage + '&resultSize=' + PAGINATION_CONSTANT.RESULTS_PER_PAGE;
			    }
			}else{
				let pagerange=this.state.pageRange.toString();
				pagerange=pagerange.split('-');
				if(pagerange.length > 1){
					queryStr = 'dsl?format=' + format + '&resultIndex='+ parseInt(pagerange[0]) +'&resultSize=' + PAGINATION_CONSTANT.RESULTS_PER_PAGE + '&resultRangeEnd=' + parseInt(pagerange[1]);
				}else{					
					queryStr = 'dsl?format=' + format + '&resultIndex='+ 1 +'&resultSize=' + parseInt(pagerange);
				} 
				
			}
			const path = queryStr;
			this.state.header = DSLQuery;
			console.log('DSLQuery: ' + DSLQuery);
			console.log('payload: ' + JSON.stringify(payload));
			console.log('path: ' + path);
			if(aggregateForGraph){
			     this.setState({isLoading: true, prevQuery:DSLQuery});
			} else if(this.typeOfCall){
					if(this.state.prevQuery !== DSLQuery){
			            this.setState({isLoading: true,
			            	totalResults: 0,
			            	prevQuery:DSLQuery
			            });
					}else{
			            this.setState({isLoading: true, nodes: [], aggregateNodes: [], prevQuery:DSLQuery});
			        }
			}
			if(!bypassCall){
				resp = this.getNodes(settings, path, payload, aggregateForGraph);
			}
		}else { // write a msg
			console.log('validInput: ' + false);
			this.setState({
				validInput: false,
				isInitialLoad: isInitialLoad
			});
			GeneralCommonFunctions.scrollTo('dslInputError');
		}
		console.log('Response: ' + resp);
  }

  onSuggestionSelected = (event, { suggestion }) => {
		event.preventDefault();

		let item = suggestion;
		console.log('onSuggestionSelected.item: ' + item);
		console.log('onSuggestionSelected.inputValue: ' + inputValue);

		this.setState({
			selected: [...this.state.selected, item],
				value: inputValue + item
			},
			function () {
			console.log('onSuggestionSelected.selected: ' + this.state.selected);
			console.log('onSuggestionSelected.value: ' + this.state.value);
		});
		//if (!item.includes('(')) {
	  if (item.indexOf('(') === -1) { // not found
			this.setState({previousNodeTypeDsl: item},
				function () {
					this.setState({
					nodeTypeDsl: item
					});
					console.log('onSuggestionSelected.previousNodeTypeDsl: ' + this.state.previousNodeTypeDsl);
					console.log('onSuggestionSelected.nodeTypeDsl: ' + this.state.nodeTypeDsl);
				}
			);
		}
  }

  storeInputReference = autosuggest => {
		if (autosuggest !== null) {
			this.input = autosuggest.input;
		}
  };

  clear = () => {
		this.setState({
			value: '',
			previousNodeTypeDsl: '',
            header: ''
		});
  }

  openSaveModal = () =>{
        this.setState({
        	showSaveModal: true,
        	saveSuccessfulMsg: false,
        	treeLoadErrMsg: false,
        	isPublicChecked:this.state.isDataSteward,
        	isCommunitySharedChecked: false,
            isEditModal:false,
            enableTreeLoadBusyFeedback: true,
            dslConfigurableFiltersArray: []
        });
        this.getTreeFromDSL(this.state.value).then(tree => {
             this.setState({enableTreeLoadBusyFeedback: false, dslConfigArray: this.getConfigArrayFromDSLTree(tree, [], [])});
        });
  };

  handleTypeaheadChange = (event) =>{
    this.setState({isTypeahead: event.target.checked});
  }

  closeSaveModal = () =>{
  	//Set previous loaded state
	  if(this.state.isEditModal){
		  this.setState({
			  value: this.state.valuePreviousState,
			  isAggregateChecked: this.state.isAggregateCheckedPreviousState,
			  isCommunitySharedChecked: this.state.isCommunitySharedCheckedPreviousState,
			  associatedNodesEnabled: this.state.associatedNodesEnabledPreviousState,
			  enableTreeLoadBusyFeedback: false
		  });
	  }

	  this.setState({
		  showSaveModal: false,
		  queryDescription: '',
		  queryName: '',		  
		  category:'',
		  enableSaveBusyFeedback: false,
		  showQueryExistsWarning: false,
		  saveFailureMsg: false,
		  isEditModal:false
	  });
  };

  submitSave = (bypassDupeCheck) =>{
	let existQueryName=false;
	let queryId='';
	Object.keys(this.state.loadedQueries).map((key) =>{
		if(this.state.loadedQueries[key].name === this.state.queryName){
			existQueryName=true;
			if(this.state.showQueryExistsWarning){
				queryId=key;
			}			
		}
	});
    if(!bypassDupeCheck && existQueryName){
        this.setState({showQueryExistsWarning:true});
    }else{
        var aggregateString = "false";
        if(this.state.isAggregateChecked){
            aggregateString = "true";
		}
		var queryParam=(this.state.queryId==='')?queryId:this.state.queryId;
        var body =  {
                      "cols": [
                          {
                              "name": "query_name",
                              "value": this.state.queryName
                          },
                          {
                              "name": "creator",
                              "value": sessionStorage.getItem(ENVIRONMENT + 'userId')
                          },
                          {
                              "name": "description",
                              "value": this.state.queryDescription
                          },
                          {
                              "name": "is_aggregate",
                              "value": aggregateString
                          },
                          {
                              "name": "community_shared",
                              "value": "" + this.state.isCommunitySharedChecked
                          },
                          {
                              "name": "is_public",
                              "value": "" + this.state.isPublicChecked
                          },
                          {
                              "name": "template_details",
                              "value": JSON.stringify(this.state.staticTemplateFilters)
                          },
                          {
                              "name": "dsl",
                              "value": btoa('<pre>' + this.state.value + '</pre>')
						  }						  
                      ]
		}
		if(this.state.category && this.state.category !=''){
			let catObj={"name": "category","value": this.state.category}
			body['cols'].push(catObj);
		}
		let localVersion='';
		if(this.state.showQueryExistsWarning){
			if(bypassDupeCheck && this.state.loadedQueries[queryParam] && this.state.loadedQueries[queryParam].version ){
				localVersion = this.state.loadedQueries[queryParam].version;;
				body.version = localVersion;

			}
		}else{
			if(bypassDupeCheck && this.state.loadedQueries[this.state.queryId] && this.state.loadedQueries[this.state.queryId].version ){
				localVersion = this.state.loadedQueries[this.state.queryId].version;;
				body.version = localVersion;
			}
		}
        
		this.setState({showQueryExistsWarning:false, enableSaveBusyFeedback:true});
		settings['ISTABULAR'] = true;
		let localQuery='queries';
		let localHeader=null; 
		if(queryParam !==''){
			localQuery += '/'+encodeURIComponent(queryParam);
			localHeader= [{
				"name":"If-Match",
				"value": localVersion
			 }];
		}
		commonApi(settings, localQuery, 'PUT', body, 'BYOQSaveInfo', GlobalExtConstants.OVERRIDE_DOMAIN,null,localHeader)
               		.then(res => {
               			console.log('res:' + res.data);
               			if(res.status === 201){
               			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201)){
               			        this.triggerSaveError(res.data);
               			    }else{
								if(this.state.isEditModal && this.state.isDSLFlow){
									this.setState({
										value: this.state.valuePreviousState,
										isAggregateChecked: this.state.isAggregateCheckedPreviousState,
										isCommunitySharedChecked: this.state.isCommunitySharedCheckedPreviousState,
										associatedNodesEnabled: this.state.associatedNodesEnabledPreviousState,
									});
								}

								let jumpToId = "saveSuccess";
								if (this.state.isSavedQueryFlow && this.state.isEditModal){
									jumpToId = "saveSuccessEdit";
								}
								else if(this.state.isSavedQueryFlow && !this.state.isEditModal){
									jumpToId = "saveSuccessTemplate";
								}

								this.setState({
									saveSuccessfulMsg: "The following query was successfully saved: " + this.state.queryName,
									showSaveModal: false,
									enableSaveBusyFeedback:false,
								});

								GeneralCommonFunctions.scrollTo(jumpToId);
								if(this.state.isSavedQueryFlow){
									this.saveLoadComponent.current.getQueries();
								}else {
									this.saveLoadComponentDsl.current.getQueries();
								}
                               }
                           }else{
                             this.triggerSaveError(res.data);
                           }
               		}, error=>{
               		    this.triggerSaveError(error.response.data);
               		}).catch(error => {
               		    this.triggerSaveError(error);
        });
    }
  };

  triggerSaveError = (error) => {
      console.error('[CustomDsl.jsx] error : ', JSON.stringify(error));
    	let errMsg = '';
    	if(error.status && error.message){
    	    errMsg += "Error Occurred: " + error.status + ' - ' +error.message;
    	}else{
    	    errMsg += "Error Occurred: " + JSON.stringify(error);
    	}
    	console.log(errMsg);
        this.setState({saveFailureMsg: errMsg + " - Failed to save query : " + this.state.queryName, enableSaveBusyFeedback:false});
        GeneralCommonFunctions.scrollTo("saveFailure");
    }

  handleQueryDescriptionChange =  (e) => {
     this.setState({queryDescription: e.target.value});
  };
  handleQueryNameChange = (e) => {
     this.setState({queryName: e.target.value});
  };
  handleQueryChange = (e) => {
  	this.setState({value: e.target.value});
  };
  handleCategoryChange = (e) =>{
	this.setState({category: e.target.value});
  };

  setQueriesState = (savedQueries) =>{
    this.setState({
    	loadedQueries: savedQueries
    });
  };

  getNodes(settings, path, payload, graphCall) {
		this.setState({isLoading: true});
		settings['ISTABULAR'] = false;
		if(this.state.enableRealTime && APERTURE_SERVICE){
			settings['ISAPERTURE'] = this.state.enableRealTime;
		}else{
			Object.keys(settings).forEach((key)=>{
				if(key==='ISAPERTURE'){
					delete settings[key];
				}
			})
		}
		console.dir('CustomDSL:settings:' + JSON.stringify(settings));
		console.log('CustomDSL:path:' + path);
		console.dir('CustomDSL:payload:' + JSON.stringify(payload));
		commonApi(settings, path, 'PUT', payload, 'BYOQDefault', null, null, [{
                                                                                "name":"X-DslApiVersion",
                                                                                "value": "V2"
                                                                              }])
		.then(res => {
			console.log('CustomDSL: Response',Object.keys(res.data));
				if(!graphCall && this.typeOfCall){
					this.setState({aggregatePaths: [],
								aggregateParentGroup: [],
								aggregateObjects: []});
				}
				if(this.state.isAggregate){
					if(graphCall){
						if(res.data.results.length > 0 && this.state.visualAddition){
							Visualization.chart('currentStateAggregate', [], [], res.data, this);
							this.setState({isLoading: false, nodes: res.data.results, res: res});
						}
					}else{
						this.processAggregateData(res);
					}
				}else{
					this.processData(res);
					if(this.state.nodes.length > 0 && this.state.visualAddition){
						Visualization.chart('currentState', [], [], this.state.res.data, this);
					}
				}
			}, error=>{
				if(this.typeOfCall){
					this.triggerError(error);
				}else{
					let errMsg = this.renderErrorMsg(error);
					this.setState({ isLoading: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});       
     				}				
			}).catch(error => {
				if(this.typeOfCall){
					this.triggerError(error);
				}else{
					let errMsg = this.renderErrorMsg(error);
					this.setState({ isLoading: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});       
     			}
	  });
		//this.input.focus();
  }

  triggerError = (error) => {
    console.error('[CustomDsl.jsx] triggerError error : ', JSON.stringify(error));
  	//this.processData('');
  	this.setState({isLoading: false,
  		totalResults: 0,
		showPagination: false,
		showResults: false,
		isInitialLoad: false,
		noResults: true,
		errorResults: true			  
  	  });
  	this.downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
	let errMsg = this.renderErrorMsg(error);
	this.setState({errorMessage:errMsg});
	console.log(error.config);
	this.input.focus();
  }
  renderErrorMsg = (error) =>{
	let errMsg='';
  	if (error.response) {
  		// The request was made and the server responded with a status code
  		// that falls out of the range of 2xx
  		console.log('[CustomDsl.jsx] error :', error.response);
  		if(error.response.status){
  		    errMsg += " Code: " + error.response.status;
  		}
  		if(error.response.data){
            errMsg += " - " + JSON.stringify(error.response.data);
        }
  	} else if (error.request) {
  		// The request was made but no response was received
  		// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
  		// http.ClientRequest in node.js
  		console.log(error.request);
  		errMsg += " - Request was made but no response received";
  	} else {
  		// Something happened in setting up the request that triggered an Error
  		console.log('Error', error.message);
  		errMsg += " - Unknown error occurred " + error.message;
  	}
   return errMsg;
  }
  formAliasFilterPropertes = ()  =>{
	let tableAggregateAliasColumns={};
	this.tableFilterAliasColumns={};
	let dslQuery = this.state.value;
	var limitPattern = /limit[\s]\d+|limit\d+/ig
	var limitkey = dslQuery.match(limitPattern);
	if(limitkey){
		dslQuery = dslQuery.replace(limitkey[limitkey.length-1],'').trim();
	}
	dslQuery = this.alterDslQueryByRemoveSpaces(dslQuery);
	//New adding
	this.dslObject={};
	this.nodeTypeArray=[];
	//create placeholders for NodeTypes with Propand Propvalues
	this.tempDslQuery=this.formTempDslQuery(dslQuery);
	//Preparing Json Object to render into Placeholder		
	this.contructDslNodes(dslQuery,'node',false,false,false,false);
	;
	let aliasRegex=/\'(\s)as(\s)\'|\'as\'/ig;
	Object.keys(this.dslObject).map((nodekey)=>{
		let nodeprops=this.dslObject[nodekey][0]['props'];
		if(nodeprops){
			let nodeTypeProp = nodeprops[0].slice(1,-1).split(',');
			let objAlias = {};
			let filterObjAlias={};
			for(var s=0;s<nodeTypeProp.length;s++){
				let nodeTypePropes=nodeTypeProp[s].match(aliasRegex);
				let alias='';
				let nprop='';
				if(nodeTypePropes){
					let nodeTypeSplit=nodeTypeProp[s].split(aliasRegex);
					nprop=nodeTypeSplit[0].replace(/\'/g,'');                  
					alias=nodeTypeSplit[nodeTypeSplit.length-1].replace(/\'/g,'');
					objAlias[nprop]=alias;
					filterObjAlias[alias]=nprop;
				}
			}
			let nodeNo=parseInt(nodekey.substr(nodekey.length-2,nodekey.length-1).replace(/\-/g,''));
			let keyact=isNaN(nodeNo);
			let actKey=nodekey.split('-');
			if(!keyact){
				actKey.splice(actKey.length-1,1);
				nodekey=actKey.join('-')+nodeNo;
			}		
			if(!tableAggregateAliasColumns[nodekey]){   
				tableAggregateAliasColumns[nodekey]=[]; 
				tableAggregateAliasColumns[nodekey].push(objAlias);      
			
			} 
			if(!this.tableFilterAliasColumns[nodekey]){   
				this.tableFilterAliasColumns[nodekey]=[]; 
				this.tableFilterAliasColumns[nodekey].push(filterObjAlias);		  
			}
		}		
	});
	return tableAggregateAliasColumns;
  }
  processAggregateData = (resp) =>{
        console.log('CustomDSL:processAggregateData Response data: ' + JSON.stringify(resp.data));
	var downloadCount = DOWNLOAD_ALL;
        var uniqueNodePaths = [];
        var uniqueNodeAttributes = [];
        var groupingByStart = [];
		var aggregateObjectArray = [];
		if (resp.data && resp.data.results) {
			for(var i = 0; i < resp.data.results.length; i++){
				var fullPath = "";
				var nodePath = "";
				var nodeTypesForPath = [];
				var startNodeKey = "";
				var aggregateObject = {};
				//Make sure everything is in an array, so pushing single element into the array
				if(!Array.isArray(resp.data.results[i])){
					var tempObj = Object.assign({}, resp.data.results[i]);
					resp.data.results[i] = [];
					resp.data.results[i].push(tempObj);
				}
				for(var j = 0; j < resp.data.results[i].length; j++){
					var objectIndex = 0;
					for(var key in resp.data.results[i][j]){
						var nodeType = this.getNodeTypeFromURI(key);
						if (objectIndex === 0){
							startNodeKey = key;
						}
						objectIndex++;
						var nodeTypeLabel = '';
						if(nodeTypesForPath[nodeType] >= 1){
							nodeTypeLabel = nodeType + nodeTypesForPath[nodeType];
							nodeTypesForPath[nodeType] = nodeTypesForPath[nodeType]++;
						}else if (nodeTypesForPath[nodeType] === 0){
							nodeTypeLabel = nodeType + 1;
							nodeTypesForPath[nodeType] = 1;
						}else{
							nodeTypeLabel = nodeType;
							nodeTypesForPath[nodeType] = 0;
						}
						if(!uniqueNodeAttributes[nodeTypeLabel]){
						    uniqueNodeAttributes[nodeTypeLabel] = [];
						}
						for(var propKey in resp.data.results[i][j][key].properties){
						    if(uniqueNodeAttributes[nodeTypeLabel].indexOf(propKey) === -1){
						        uniqueNodeAttributes[nodeTypeLabel].push(propKey);
						    }
							Object.defineProperty(resp.data.results[i][j][key].properties, nodeTypeLabel + '|' + propKey, Object.getOwnPropertyDescriptor(resp.data.results[i][j][key].properties, propKey));
							delete resp.data.results[i][j][key].properties[propKey];
						}
						fullPath += key + ' > ';
						nodePath += nodeTypeLabel + ' > ';
					}
					aggregateObject = Object.assign({}, aggregateObject, resp.data.results[i][j][startNodeKey].properties);
				}
				nodePath =  nodePath.substring(0, nodePath.length - 3);
				if(!aggregateObjectArray[nodePath]){
					aggregateObjectArray[nodePath] = [];
				}
				aggregateObjectArray[nodePath].push(aggregateObject);
				resp.data.results[i].fullPath = fullPath.substring(0, fullPath.length - 3);
				resp.data.results[i].nodePath = nodePath;
				if(!groupingByStart[startNodeKey]){
					groupingByStart[startNodeKey] = [];
					groupingByStart[startNodeKey].push(resp.data.results[i]);
				}else{
					groupingByStart[startNodeKey].push(resp.data.results[i]);
				}
				if(uniqueNodePaths.indexOf(resp.data.results[i].nodePath) === -1){
					uniqueNodePaths.push(resp.data.results[i].nodePath);
				}
				console.log('Grouping by Start: ' + JSON.stringify(groupingByStart));
				console.log('Unique Paths: ' + JSON.stringify(uniqueNodePaths));
			}
			if(this.typeOfCall){
				let totalResults = (resp.headers) ? parseInt(resp.headers['total-results']) : 0;
				console.log('totalResults>>>>>>>>>>>>>>>>>>>>>',totalResults);				
				if(totalResults > DOWNLOAD_ALL){
					this.downloadAllTooltip = DOWNLOAD_ALL + ' results out of '+ totalResults +' results will be downloaded, Please filter results further to obtain full report';
				}else{
					this.downloadAllTooltip = (totalResults === 1) ?'Downloads ' + totalResults + ' Results' : 'Downloads all ' + totalResults + ' Results' ;
					downloadCount= totalResults;
				}       
				this.setState({
					aggregateNodes: resp.data.results,
					res: resp,
					aggregatePaths: uniqueNodePaths,
					aggregatePathAttrs: uniqueNodeAttributes,
					aggregateObjects: aggregateObjectArray,
					aggregateParentGroup: groupingByStart,
					isLoading: false,
					totalResults: totalResults,
					showResults: totalResults > 0 ? true : false,
					showPagination: totalResults > 0 ? true : false,
					isInitialLoad: false,
					noResults: totalResults > 0 ? false : true,
					errorResults: false,
					downloadCount: downloadCount,
				},function(){this.formatAggregateIntoTabular();});
				this.multipleNodes = this.state.aggregateNodes.length > 1;
				//this.setState({ viewName: "CardLayout" }); commented not to defaulting to CardView 
			}else{
				console.log('else condition>>>>');			
				if(resp.data && resp.data.results) {			
					this.nodeResults = resp.data.results;
					let totalResults = 0;
					let totalPages = 0;
					totalResults = parseInt(resp.headers['total-results']);
					totalPages = parseInt(resp.headers['total-pages']);
					this.setState({
						allAggregateNodes: resp.data.results,
						allres: resp,
						allAggregatePathAttrs: uniqueNodeAttributes,
						allAggregatePaths: uniqueNodePaths,
						allAggregateObjects: aggregateObjectArray,
						allAggregateParentGroup: groupingByStart,
						totalPages:totalPages,
						totalResults:totalResults,
						errorDownloadResults:false,
						downloadErrorMsg:''				
					},function(){this.formatAggregateIntoTabular();});
				}else{
					this.downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
				}
				this.setState({isLoading: false});
		  	}
		}
		GeneralCommonFunctions.scrollTo("outputBlock");
  }

  formatAggregateIntoTabular = () =>{
    let tableColumnsList = [];
    let tableDataList = [];
	let columnFilter = [];
	var aggregatePaths = [];
	var aggregateObjects = [];
	let tableAggregateAliasColumns=this.formAliasFilterPropertes();
	
	if(this.typeOfCall){
	    aggregatePaths = this.state.aggregatePaths;
	    aggregateObjects = this.state.aggregateObjects;
	}else{
	    aggregatePaths = this.state.allAggregatePaths;
	    aggregateObjects = this.state.allAggregateObjects;
	}
	for(var p = 0; p < aggregatePaths.length; p++){
		var types = [aggregatePaths[p]];
		var type = types[0];
		var attributeList = this.getAttributesFromPath(type,tableAggregateAliasColumns);
		var downloadAllCalled = false;
		tableColumnsList[type] = [];
		tableColumnsList[type].push({dataField: 'id', text: 'id', hidden: true });
		tableDataList[type] = aggregateObjects[type];
		for(var attrIndex = 0; attrIndex < attributeList.length; attrIndex++){
			let col=attributeList[attrIndex].split('|').splice(0,2).join('|');
			let desc=attributeList[attrIndex].split('|')[2];
			if(!columnFilter[attrIndex] || (columnFilter[attrIndex] && columnFilter[attrIndex][attributeList[attrIndex]] === undefined)){
				let obj = {};				
				obj[col] = '';
				obj['description']=desc
				columnFilter.push(obj);
			}
			  if(!this.typeOfCall){
				tableColumnsList[type].push({name: col,
					dataField: col, 
					text: col, 
					hidden: false,
					headerAttrs: {title:desc},				
					filter: textFilter({getFilter: (f) => { this.setState({filterEnable: true})}})
				});
			  }else{
			    tableColumnsList[type].push({name: col,
                   	dataField: col,
                   	text: col,
					hidden: false,
					headerAttrs: { title:desc},	
                   	filter : customFilter(),
                   	filterRenderer : (onFilter, column) => <AttributeFilter handleOnFilter= {this.handleOnFilter} onFilter={ onFilter } column={ column } isPageChange={this.state.isPageNumberChange} nodeType={type} columnFilter={columnFilter}/>
                     });
			  }
		}
		if(this.typeOfCall){
            this.setState({tabularAggregateColumns: tableColumnsList, tabularAggregateData: tableDataList, aggregateAttrList: attributeList,tableAggregateAliasColumns:tableAggregateAliasColumns});
        }else{
            this.setState({allTabularAggregateColumns: tableColumnsList, allTabularAggregateData: tableDataList, allAggregateAttrList: attributeList,tableAggregateAliasColumns:tableAggregateAliasColumns}, function(){if(!downloadAllCalled){downloadAllCalled = true;this.downloadAllAggregate();}});
	}
	}
  }

  downloadAggregate = () =>{
	this.typeOfCall = true;
    ExportExcel.generateExcelFromTabularViewMultiTabs( this.state.tabularAggregateData, this.state.tabularAggregateColumns, 'AggregateObjects.xlsx');
  }

  downloadAllAggregate = (pageRange,rangeState) =>{
	console.log('downloadAllAggregate>>>>>>>>>>>*',pageRange);
    if(pageRange){
	  this.typeOfCall=false;
	  let rangeModelState=(rangeState)? rangeState: false;
      this.setState(
        { pageRange: pageRange,isLoading: true,showDownloadResultsModal:rangeModelState,enableModelBusyFeedback:true},
        function () { this.formQueryString(false,false,false); }.bind(this)
      );
    }else{
      this.setState(
        {errorDownloadResults: false, showDownloadResultsModal: false, downloadErrorMsg:'', isLoading: false, enableModelBusyFeedback:false},
        function (){
			ExportExcel.generateExcelFromTabularViewMultiTabs( this.state.allTabularAggregateData, this.state.allTabularAggregateColumns, 'AggregateObjects.xlsx');
			this.typeOfCall = true;
		}.bind(this)
      );
	} 
  }
  openDownloadRange = () =>{    
	this.setState({
	  showDownloadResultsModal: true,
	  errorDownloadResults: false,
	  downloadErrorMsg:''});    
  }
  closeDownloadResults = () =>{
	this.setState({
		showDownloadResultsModal: false,
		enableModelBusyFeedback: false
		});   
  }
  processData = (resp) => {
		console.log('Response data: ' + JSON.stringify(resp.data));
		this.tableFilterAliasColumns=this.formAliasFilterPropertes();
		if(this.typeOfCall){
			if (resp.data && resp.data.results) {
				//this.nodes = data.results;setDefaultViewName
				this.setState({
					nodes: resp.data.results,
					res: resp
				});
				this.multipleNodes = this.state.nodes.length > 1;
				//this.setState({ viewName: "CardLayout" });
			}
			let totalResults = 0;
			let downloadCount = DOWNLOAD_ALL;
			if(resp.headers) {
				totalResults = parseInt(resp.headers['total-results']);
				if(totalResults > DOWNLOAD_ALL){
					this.downloadAllTooltip = DOWNLOAD_ALL + ' results out of '+ totalResults +' results will be downloaded, Please filter results further to obtain full report';
				}else{
					this.downloadAllTooltip = (totalResults === 1) ?'Downloads ' + totalResults + ' Results' : 'Downloads all ' + totalResults + ' Results' ;
					downloadCount= totalResults;
				}
				this.setState({isLoading: false,
					totalResults: totalResults,
					totalPages: parseInt(resp.headers['total-pages']),
					showPagination: resp.headers['total-results'] > 0 ? true : false,
					showResults: resp.headers['total-results'] > 0 ? true : false,
					isInitialLoad: false,
					noResults: resp.headers['total-results'] && resp.headers['total-results'] > 0 ? false : true,
					errorResults: !resp.headers['total-results'],
					downloadCount: downloadCount
				});
			}
		}else{
			if(resp.data && resp.data.results) {
				this.nodeResults = resp.data.results;
				let totalResults = 0;
				let totalPages = 0;
				if(resp.headers) {
					totalResults = parseInt(resp.headers['total-results']);
					totalPages = parseInt(resp.headers['total-pages']);
				}
				this.setState({totalPages:totalPages,errorDownloadResults:false,downloadErrorMsg:''},() => {this.getAllExcels()});				
			}else{
				this.nodeResults = '';
				this.setState({ isLoading: false,errorDownloadResults:true,downloadErrorMsg:error+'',enableModelBusyFeedback:false});       
     		}
		}
		GeneralCommonFunctions.scrollTo("outputBlock");
  }

  close = () => {
		this.setState({
			showModal: false
		});
  }

  onClick = (event) => {
		console.log('onClick');
  }

  onTextAreaChange = (event) => {
    this.setState({value: event.target.value});
  }

  onChange = (event, { newValue }) => {
		console.log('onChange.newValue: ' + newValue);
		let term = null;
		this.setState({
			value: newValue},
			function () {
				console.log('onChange.selected: ' + this.state.selected);
				console.log('onChange.state value set: ' + this.state.value);
				if (this.state.value.slice(-1) === '(' || this.state.value.slice(-1) === '>') {
					//this.onSuggestionsFetchRequested(term);
					term = this.getValue(this.state.value); // this returns term, array of props or rules
					if (term) {
					console.log('onChange.term: ' + term.toString());
					}
					console.log('onChange.setting suggestions');
					this.setState({
						suggestions: term
					});
				}else if(this.state.value === ''){
					inputValue='';
				}
			}
		);
		// if term exists && term length > 0 - try to load suggestions
		//if(term && term.length > 0){
	  	//properties = term.map(property => {
				//return <div key={property}>{property}<br/></div>;
	  	//});
		//}
	}

  getValue = (term) => {
		inputValue = '';
		let isStartNode = (term.split('>')).length <= 1;
		console.log('getValue.term is: ' + term);

		let toArray = term.split(' ');
		//console.log('Value' + JSON.stringify(toArray[toArray.length - 1]));
		if (toArray && toArray.length > 1) {
			//this.model = term;
			console.log('getValue.toArray: ' + toArray.length);
			this.setState({
			model: term
			});
			term = toArray[toArray.length - 1];

		}
		for (var i = 0; i < toArray.length - 1; i++) {
			inputValue = inputValue + ' ' + toArray[i];
		}
		console.log('getValue.inputValue toArray: ' + inputValue);
		//console.log(term.slice(-1));
		if (term.slice(-1) === '(') {
			console.log('getValue.detected ( property search');
			var nodeVal = term.slice(0, -1);
			nodeVal = nodeVal.trim();
			console.log('getValue.property.nodeVal: ' + nodeVal);
			var val = [];
			val = this.state.nodeTypes.filter(v => v.toLowerCase().indexOf(nodeVal.toLowerCase()) > -1);
			console.log('getValue.val.length: ' + val.length);
			if (val.length === 0) {
			  nodeVal = this.state.previousNodeTypeDsl;
			  inputValue = inputValue + term.slice(0, -1);
			}else {
			  inputValue = inputValue + ' ' + nodeVal;
			}
			console.log('getValue.inputValue property: ' + inputValue);
            if (nodeVal) {
				this.propertiesDsl=this.populateColumnOptions(nodeVal, isStartNode);
				this.setState({nodeTypeDsl: nodeVal,previousNodeTypeDsl:nodeVal});
			}
			term = this.propertiesDsl;
		} else if (term.slice(-1) === '>') {
			console.log('getValue.detected > edgerule search');
			var nodeVal = this.state.previousNodeTypeDsl;
			nodeVal = nodeVal.trim();
			console.log('getValue.edgerule.nodeVal: ' + nodeVal);
			var val = [];

			inputValue = term;

			this.populateEdgeRules(nodeVal);
			term = traverseRulesDsl;
		}
		else {
			//console.log('getValue.nodeTypes: ' + this.state.nodeTypes);
			term = (term === '' ? this.state.nodeTypes : this.state.nodeTypes.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10);
		}
		//console.log('getValue.term: ' + term);
		return term;
 }

  camelToDash = (str) =>  {
    console.log('camelToDash.str: ' + str);
		return (str.replace(/\W+/g, '-')
	  .replace(/([a-z\d])([A-Z])/g, '$1-$2')).toLowerCase();
  }

  
  populateColumnOptions = (nodeType, isStartNode) =>{
	  console.log('populateColumnOptions>>>>>nodeType',nodeType);
		let propertiesDsl = [];
		var result = JSON.parse(OXM);
		var arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
		//console.dir(arrayOfTypes);
		var foundIndex = -1;
		var searchParam = nodeType;
		//if(['PSERVER', 'COMPLEX', 'CLOUDREGION', 'NETWORKPROFILE', 'VIRTUALDATACENTER'].indexOf(this.nodeType.toUpperCase()) === -1){
			//searchParam = this.nodeType.substring(0, this.nodeType.length - 1);
		//}
		//console.log('nodeType:' + nodeType);
		if (nodeType.substr(nodeType.length - 3) === 'ies') {
			searchParam = nodeType.substring(0, nodeType.length - 3) + 'y';
		}

		if (nodeType.toUpperCase() === 'LINESOFBUSINESS') {
			searchParam = 'lineOfBusiness';
		}
		//console.log('searchParam:' + searchParam);
		for (var i = 0; i < arrayOfTypes.length && foundIndex === -1; i++) {
			if (arrayOfTypes[i]['xml-root-element'][0]['$']['name'] === this.camelToDash(searchParam)) {
			foundIndex = i;
			}
		}
		for (var j = 0; j < arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'].length; j++) {
			let property =  arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['name'];
			//console.log('array' + JSON.stringify(property));
			let type = arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['type'];
			//console.log('type: ' + type);
			if (type === 'java.lang.String' || type === 'java.lang.Boolean' || type ==='java.lang.Integer' || type ==='java.lang.Long') {
				let value = '';
				if(isStartNode !== undefined){
					value = '(\'' + property + '\',\'Value\')';
				}else{
					value= property;
				}
				propertiesDsl.push(value);
			}
		}
		//console.log('propertiesDsl: ' + propertiesDsl);
		let sortedPropertiesDsl = propertiesDsl.sort(function (filter1, filter2) {
			if (filter1 < filter2) {
				return -1;
			} else if (filter1 > filter2) {
				return 1;
			} else {
				return 0;
			}
		});
		//console.log('sortedPropertiesDsl: ' + sortedPropertiesDsl);		
		if(isStartNode !== undefined){
			propertiesDsl = sortedPropertiesDsl;
			//console.log('FilterList' + JSON.stringify(propertiesDsl));
		}
		return propertiesDsl;
		
  }
  componentWillReceiveProps(nextProps) {
		console.log('nextProps......', nextProps);
		//console.log('this.props.....', this.props);
		
		var relArray = false;
		if(this.props.match.params.relArray){
			if(nextProps.match.params.relArray){
				if(nextProps.match.params.relArray !== this.props.match.params.relArray){
					relArray = true;
				}
			}
		}else{
			relArray = false;
		}
		console.log('relArray>>>>',relArray);
		this.setState({
        		isDSLFlow: this.props.viewName === 'BYOQ',
			isSavedQueryFlow: this.props.viewName === 'Saved Queries',
			showNodeModal:false
        	},()=>{if (nextProps.match.params.type && nextProps.match.params.propId &&
			(nextProps.match.params.type !== this.props.match.params.type || 
			nextProps.match.params.propId !== this.props.match.params.propId || relArray)) {
			this.props = nextProps;
			this.buildDynamicByoq();
		}});		
  }
  populateEdgeRules = (nodeType) => {
		traverseRulesDsl = [];
		console.log('populateEdgeRules.nodeType: ' + nodeType);
		for (var i = 0; i < this.state.edgeRules.length; i++) {
			var ruleObj = this.state.edgeRules[i];
			if (ruleObj.from === nodeType) {
			console.log('from: ' + ruleObj.to);
			traverseRulesDsl.push(ruleObj.to);
			}
			if (ruleObj.to === nodeType) {
			console.log('to: ' + ruleObj.from);
			traverseRulesDsl.push(ruleObj.from);
			}
		}
		let traverseRulesDslSorted = traverseRulesDsl.sort(function (filter1, filter2) {
			if (filter1 < filter2) {
				return -1;
			} else if (filter1 > filter2) {
				return 1;
			} else {
				return 0;
			}
    });
		console.log('EdgeRulesList' + JSON.stringify(traverseRulesDslSorted));
		traverseRulesDsl = traverseRulesDslSorted;
  }

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
	  this.setState({
		suggestions: this.getSuggestions(value)
	  });
  };
  getAllExcels = (pageRange,rangeState) =>{
	console.log('getAllExcels>>>>>>>>>>>*',pageRange);
    if(pageRange){
	  this.typeOfCall=false;
	  let rangeModelState=(rangeState)? rangeState: false;
      this.setState(
        { pageRange: pageRange,isLoading: true,showDownloadResultsModal:rangeModelState,enableModelBusyFeedback:true},
        function () { this.formQueryString(false,false,false); }.bind(this)
      );
    }else{
    
      this.setState(
        {errorDownloadResults: false, showDownloadResultsModal: false, downloadErrorMsg:'', isLoading: false, enableModelBusyFeedback:false},
        function () { generateExcels(this.nodeResults,this.state.prevQuery);this.nodeResults='';this.typeOfCall = true;}.bind(this)
	  );
    }   
  }

  getTreeFromDSL = (dslQuery) =>{
     var treeObject = [];
     var payload = {dsl: dslQuery};
     settings['ISAPERTURE'] = true;
     return 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.triggerTreeError(res.data, 'treeLoad');
                         			        return {};
                         			    }else{
                         			        treeObject = res.data;
                         			        this.setState({
                                              treeLoadErrMsg: null
                                            });
                                           console.log("TREE OBJECT: " + JSON.stringify(treeObject));
                                           //set the init state
                                           var initNode = GeneralCommonFunctions.extractNodeDetails(treeObject.children[0], true, this.triggerTreeError, APERTURE_SERVICE);
                                           if(!this.state.treeLoadErrMsg || this.state.treeLoadErrMsg === ''){
                                               console.log(JSON.stringify(initNode));
                                               return initNode;
                                           }else{
                                               this.triggerTreeError(null, 'treeLoad');
                                               return {};
                                           }
                                       }
                                   }else{
                                     this.triggerTreeError(res.data, 'treeLoad');
                                     return {};
                                   }
                         		}, error=>{
                         		    if(error.response.status === 404){
                         		        this.setState({enableTreeLoadBusyFeedback:false});
                         		        return {};
                         		    }else{
                         		        this.triggerTreeError(error.response.data, 'treeLoad');
                         		        return {};
                         		    }
                         		}).catch(error => {
                         		    this.triggerTreeError(error, 'treeLoad');
                         		    return {};
                               })
  }
  triggerTreeError = (error, type) => {
    console.error('[CustomDsl.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'){
  	    var errorMessage = errMsg;
        this.setState({treeLoadErrMsg: errorMessage, enableTreeLoadBusyFeedback: false});
    }else{
        console.log('[CustomDsl.jsx] :: triggerError invoked with invalid type : ' + type);
    }
  }
  getConfigArrayFromDSLTree = (node, configArray, keyArray) =>{

   var tempKey = node.name;
   var nodeKey;
   if(keyArray[tempKey]){
       nodeKey = tempKey + '-' + keyArray[tempKey];
       keyArray[tempKey] = keyArray[tempKey]++;
   }else{
       nodeKey = tempKey;
       keyArray[tempKey] = 1;
   }
   if(node.details && node.details.attrDetails){
       for (var attr in node.details.attrDetails){
           if(node.details.attrDetails[attr].filterType && node.details.attrDetails[attr].filterType.length > 0
                && node.details.attrDetails[attr].filterType[0] !== ""){
                if(!configArray[nodeKey]){
                    configArray[nodeKey] = {};
                    configArray[nodeKey].filters = [];
                }
                configArray[nodeKey].filters.push(attr);
           }
       }
   }
   if(node.children && node.children.length > 0){
       for(var i = 0; i < node.children.length; i++){
           configArray = this.getConfigArrayFromDSLTree(node.children[i], configArray, keyArray);
       }
   }
    return configArray;
  }
  handlePageChange = (pageNumber) => {
    console.log('[CustomDsl.jsx] HandelPageChange active page is', pageNumber);
	this.typeOfCall = true;
	if(this.state.isAggregateChecked){
		this.setState(
			{ aggregateActivePage: pageNumber, isLoading: true, nodes: [], aggregateNodes: [],resetColumnFilters: false, isPageNumberChange: true},
			function () { this.formQueryString(false,false,false); }.bind(this)
			);
	}else{
		this.setState(
		{ activePage: pageNumber, isLoading: true, nodes: [], aggregateNodes: [],resetColumnFilters: false, isPageNumberChange: true},
		function () { this.formQueryString(false,false,false); }.bind(this)
		);
	}
  }
  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
		this.setState({
			suggestions: []
		});
  };

// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
  escapeRegexCharacters(str) {
		return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }

  getSuggestions = (value) => {
    console.log('getSuggestions.value: ' + value);
		const escapedValue = this.escapeRegexCharacters(value.trim());
		const regex = new RegExp('^' + escapedValue, 'i');
		return nodeTypes.filter(nodeType => regex.test(nodeType));
  }


// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
  getSuggestionValue = suggestion => suggestion;

// Use your imagination to render suggestions.
  renderSuggestion = suggestion => (
		<div>
			{suggestion}
		</div>
  );

  onSuggestionsUpdateRequested =( { value }) => {
    console.log('onSuggestionsUpdateRequested.value: ' + value);
		this.setState({
			suggestions: getSuggestions(value)
		});
  }

  shouldRenderSuggestions = () => {
		return true;
  }
  openHistory = (nodeDisplay, nodeUri, nodeType) => { // open modal from Card
	console.log('history >> showModal',nodeDisplay);
	let historyNodeUri = (nodeUri)?nodeUri.replace('/aperture/','/'):nodeUri;
	let paramToPassThrough = '';
	if(nodeType){
		this.setState({
			nodeDisplay: nodeDisplay,
			showHistoryModal: true,
			showModelOptions:true,
			enableCalendar:true,
			historyType:(this.state.historyType === 'dsl') ? 'nodeState' : this.state.historyType,
			focusedNodeUri: historyNodeUri,
			focusedNodeType: nodeType
		});
	}else{
		this.setState({
			showHistoryModal:true,
			showModelOptions:false,
			enableCalendar:true,
			historyType : 'dsl',
			focusedNodeUri: this.state.value,
			focusedNodeType: nodeType
		});		
	}
  }
  closeHistory = () => {
		this.setState({
			showHistoryModal: false,			
			enableCalendar:true,
			historyType :'nodeState'
		});
  }
  submitHistory = () => {
	console.log("submitting history");
	let paramToPassThrough = '';
	if(this.state.focusedNodeType){
		paramToPassThrough = '/history/' + this.state.historyType +'/' + this.state.focusedNodeType + '/' + btoa(this.state.focusedNodeUri);	
	}else{
		paramToPassThrough = '/historyQuery/' + this.state.historyType + '/' + btoa(this.state.value);
	}
    let epochStartTime = (this.state.startDate).unix();
	this.props.history.push(paramToPassThrough + '/' + epochStartTime * 1000);
  }
  handleDateChange = (newDate) =>{
    this.setState({ startDate: moment(+newDate) });
    console.log('[CustomDsl.jsx] handleDateChange date is ', this.state.startDate);
    console.log('[CustomDsl.jsx] handleDateChange date is in millis ', +this.state.startDate);
  }

  setViewName(event) {
    console.log(event.currentTarget.value);
    if(this.state.isAggregate && event.currentTarget.value === 'VisualLayout'){
        this.formQueryString(false, false, true);
    }
    this.setState({
    		viewName: event.currentTarget.value
    });
  }

  setDefaultViewName=(event)=>{
		let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
		let layout =  event.target.value;

		if(sessionStorage.getItem(ENVIRONMENT + 'userId')) {
			if (event.target.checked) {
				localStorage.setItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference', layout);
			} else {
				localStorage.removeItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference');
			}
		}

		this.setState({
			defaultViewName: event.target.value
		});
		this.baseState.viewName=event.target.value;
		this.baseState.defaultViewName=event.target.value;
	}
  openNodeModal(nodeDisplay, nodeUri, nodeType){ // open modal
                   console.log('customdsl >> showModal');
                   nodeDisplay = "Node Details of " + nodeUri;
                   let node = null;
                   let found = false;
                   for(var j = 0; j < this.state.nodes.length && !found; j++){
                      if(this.state.nodes[j].url === nodeUri){
                          node = this.state.nodes[j];
                          found = true;
                      }
                   }
                   if(nodeDisplay && found){
                      this.setState({
                         nodeDisplay: nodeDisplay,
                         focusedNode: node,
                         showNodeModal:true
                      });
                   }else{
                       this.setState({
                       showNodeModal:true
                       });
                   }
    }

    closeNodeModal = () => {
      this.setState({
      	showNodeModal: false
      });
    }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if((this.state.isAggregate || this.state.aggregateNodes.length > 0 || this.state.nodes.length > 0) && !this.state.visualAddition){
        //Visualization.chart('currentState', [], [], this.state.res.data, this);
        this.setState({
            		visualAddition: true
        });
    }
  }
  setHistoryType(event) {
    console.log(event.target.value);
    let enableCalendar = false;
    if(event.target.value === 'nodeLifeCycle'){
        enableCalendar = false;
    }else{
        enableCalendar = true;
    }
    this.setState({
    		historyType: event.target.value,
    		enableCalendar: enableCalendar
    });
    console.log(this.state.enableCalendar);
  }
  loadBulkCallback=(loadQueryList)=>{
	console.log('Start:Load bulk Callback>>>>>>');
	let filterEntriesList=[];
	let filterTemplateHeaderList=[];
	let filterTemplateErrorList=[];
	let nodeTypeOfDslTemplateList=[];
	let templateQueryList=[];
	let valueList=[];
	this.dslObjectList=[];
	this.nodeTypeArrayList=[];
	this.tempDslQueryList=[];
	this.templateErrorList={};
	let isAggregateCheckedList=[];
	let associatedNodesEnabledList=[];
	let queryNameList=[];
	let queryDescriptionList=[];
	let categoryList=[];
	let isPublicCheckedList=[];
	let queryIdList=[];
	let filterTypeDisplayList=[];
	let isCommunitySharedList = [];
	let staticTemplateFiltersList=[];
	for(var idx=0;idx<loadQueryList.length;idx++){
		let splitString = loadQueryList[idx].split('||');
		let name = splitString[0];
		let description = splitString[1];
		let category=(splitString[2] !== 'undefined')? splitString[2]:'';
		let dsl = splitString[3];
		let isAggregate = splitString[4];
		let type = splitString[5];
		let queryId = splitString[6];
		let isCommunityShared = splitString[7];
		let templateDetails = splitString[8];
		if(name !== '' && description !== '' && this.state.isSavedQueryFlow){
		    var staticTemplateFilters = templateDetails;
            if(staticTemplateFilters.length > 0){
              staticTemplateFilters = JSON.parse(staticTemplateFilters);
            }else{
              staticTemplateFilters = [];
            }
            staticTemplateFiltersList.push(staticTemplateFilters);
			queryNameList.push(name);
			queryIdList.push(queryId);
			queryDescriptionList.push(description);
			isPublicCheckedList.push(type === 'public');
			categoryList.push(category);
			isCommunitySharedList.push(isCommunityShared);			
		}
		associatedNodesEnabledList.push(false);
		if(isAggregate === "true"){
			isAggregateCheckedList.push(true);
		}else{
			isAggregateCheckedList.push(false);		
		}
		filterTypeDisplayList.push({'default':'Filter Type'});
		this.setState({
			queryNameList:queryNameList,
			queryDescriptionList:queryDescriptionList,
			categoryList:categoryList,
			isPublicCheckedList: isPublicCheckedList,
			queryIdList: queryIdList,
			filterTemplateEntries:[],
			filterTemplateError: false,
			isTypeahead: false,
			isAggregateCheckedList: isAggregateCheckedList,
			associatedNodesEnabledList: associatedNodesEnabledList,
			filterTypeDisplayList: filterTypeDisplayList,
			downloadTemplateStatus:false,
			failedDownloadedTemplate:[],
			failedDownloadedTemplateMsg:'',
			failedEmailTemplateMsg:'',
			emailTriggerMsg:'',
		  	isMergedTabsChecked: false,
		  	staticTemplateFiltersList: staticTemplateFiltersList
		});
		
		if(this.state.isSavedQueryFlow){
							
			dsl=atob(dsl).replace('<pre>','').replace('</pre>','');			
			this.dslObject={};
			this.nodeTypeArray=[];
				
			var limitPattern = /limit[\s]\d+|limit\d+/ig;
			var limitkey = dsl.match(limitPattern);
			if(limitkey){
				dsl = dsl.replace(limitkey[limitkey.length-1],'').trim();
			}
			dsl = this.alterDslQueryByRemoveSpaces(dsl);
			//create placeholders for NodeTypes with Propand Propvalues
			this.tempDslQuery=this.formTempDslQuery(dsl);
			this.tempDslQueryList.push(this.tempDslQuery);
			//Preparinga Json Object to render into Placeholder		
			this.contructDslNodes(dsl,'node',false,false,false,false);
			//Query to replace placeholders with JSON Object values depends on Flow either SavedQuery or TableFilters
			let query=this.formTemplateQuery('savedQuery',idx,true);
			query=query.replace(/\'(as)\'/g,'\' as \'').replace(/\(\'\s(as)\s\'\)/g,'(\'as\')');
			if(limitkey){
				query+=' '+limitkey[limitkey.length-1];		
			}	
			let filterEntries=[];
			let filterTemplateHeader={};
			var errorOccurred=false;
			Object.keys(this.dslObject).map((key)=>{
				filterEntries.push(this.dslObject[key]['filterEntries'][0]);
				filterTemplateHeader[key]= {}
				filterTemplateHeader[key]=this.dslObject[key]['filterTemplateHeader'][key];
				if(!errorOccurred){
					errorOccurred=this.dslObject[key]['errorOccurred'];
				}	
			});			
			filterEntriesList.push(filterEntries);
			filterTemplateHeaderList.push(filterTemplateHeader);
			filterTemplateErrorList.push(errorOccurred);
			nodeTypeOfDslTemplateList.push(this.nodeTypeArray);
			templateQueryList.push(query);
			valueList.push(dsl);
			this.dslObjectList.push(this.dslObject);

		}
	}
	this.setState({ valueList: valueList, 
		templateQueryList: templateQueryList, 
		filterTemplateEntriesList: filterEntriesList,
		filterTemplateHeaderList:filterTemplateHeaderList,
		filterTemplateErrorList: filterTemplateErrorList,
		nodeTypeOfDslTemplateList:nodeTypeOfDslTemplateList,		
		isAggregateCheckedList: isAggregateCheckedList,
		associatedNodesEnabledList: associatedNodesEnabledList,
		isInitialLoad:false
	},()=>{GeneralCommonFunctions.scrollTo('templateList');});
  }
  loadCallback = (name, description, category, dslQuery, isAggregate, type, queryId, isCommunityShared, id, templateDetails, makeCall) =>{
  	let filterEntriesList=[];
	let filterTemplateHeaderList=[];
	let filterTemplateErrorList=[];
	let nodeTypeOfDslTemplateList=[];
	let templateQueryList=[];
	let valueList=[];
	this.dslObjectList=[];
	this.nodeTypeArrayList=[];
	this.tempDslQueryList=[];
	this.templateErrorList={};
	let isAggregateCheckedList=[];
	let associatedNodesEnabledList=[];
	let queryNameList=[];
	let queryDescriptionList=[];
	let categoryList=[];
	let isPublicCheckedList=[];
	let queryIdList=[];
	let filterTypeDisplayList=[];
	let isCommunitySharedList=[];
	let staticTemplateFiltersList=[];
	let idx=parseInt(id);
	if(isNaN(idx)){
		idx=0;
	}
    if(name !== '' && description !== '' && this.state.isSavedQueryFlow){		
		queryNameList.push(name);
		queryIdList.push(queryId);
		queryDescriptionList.push(description);
		isPublicCheckedList.push(type === 'public');
		var staticTemplateFilters = templateDetails;
        if(staticTemplateFilters.length > 0){
          staticTemplateFilters = JSON.parse(staticTemplateFilters);
        }else{
          staticTemplateFilters = [];
        }
        staticTemplateFiltersList.push(staticTemplateFilters);
		categoryList.push(category);
		isCommunitySharedList.push(isCommunityShared);
      	this.setState({
		  queryNameList:queryNameList,
		  queryDescriptionList:queryDescriptionList,
		  categoryList:categoryList,
		  isPublicCheckedList: isPublicCheckedList,
		  isCommunitySharedChecked: isCommunityShared === "true",
		  queryIdList: queryIdList,
		  isCommunitySharedList:isCommunitySharedList,
		  staticTemplateFiltersList: staticTemplateFiltersList,
		  downloadTemplateStatus:false,
		  failedDownloadedTemplate:[],
		  failedDownloadedTemplateMsg:'',
		  failedEmailTemplateMsg:'',
		  emailTriggerMsg:'',
		  isMergedTabsChecked: false,
		  isGenerateEmailChecked: false
      	});
    }
    //reset any filter template forms
	this.setState({ filterTemplateEntries: [], filterTemplateError: false, isTypeahead: false});
	associatedNodesEnabledList.push(false);
	let associatedNodesEnable=false;
	let isAggregateChecked=false;
    if(isAggregate === "true"){
		isAggregateCheckedList.push(true);
		isAggregateChecked=true;
    }else{
        isAggregateCheckedList.push(false);		
    }
    this.setState({ isAggregateCheckedList: isAggregateCheckedList, associatedNodesEnabledList: associatedNodesEnabledList,isAggregateChecked:isAggregateChecked,associatedNodesEnabled:associatedNodesEnable});	
    if(this.state.isSavedQueryFlow && !makeCall){
        this.loadTemplateForm(atob(dslQuery).replace('<pre>','').replace('</pre>',''),idx);
    }else{
		this.setState({viewName: this.state.defaultViewName,
                       activePage: 1,
                       aggregateActivePage: 1});
        this.buildDynamicByoq(atob(dslQuery).replace('<pre>','').replace('</pre>',''), makeCall);
    }
    if(this.state.isDSLFlow){
        GeneralCommonFunctions.scrollTo("jumbotron");
    }else if(this.state.isSavedQueryFlow){
        GeneralCommonFunctions.scrollTo("templateList");
    }
  }

  editCallback = (name, description, category, dsl, isAggregateStr, type, queryId, isCommunityShared, templateDetails) =>{
  	//Save stated of loaded queries
  	this.state.valuePreviousState = this.state.value;
  	this.state.isAggregateCheckedPreviousState = this.state.isAggregateChecked;
  	this.state.isCommunitySharedCheckedPreviousState = this.state.isCommunitySharedChecked;
    this.state.associatedNodesEnabledPreviousState = this.state.associatedNodesEnabled;

  	let isAggregateChecked = false;
  	let isCommunitySharedChecked = false;
  	let associatedNodesEnabled = false;

  	if(isAggregateStr === 'true'){
  		isAggregateChecked = true;
  		associatedNodesEnabled = true;
  	}

  	if(isCommunityShared === 'true'){
    	isCommunitySharedChecked = true;
    }

    var staticTemplateFilters = templateDetails;
    if(staticTemplateFilters.length > 0){
        staticTemplateFilters = JSON.parse(staticTemplateFilters);
    }else{
        staticTemplateFilters = [];
    }
    this.getTreeFromDSL(dsl).then(tree => {
         this.setState({
                        enableTreeLoadBusyFeedback: false,
                        dslConfigArray: this.getConfigArrayFromDSLTree(tree, [], []),
                        showSaveModal: true,
                        saveSuccessfulMsg: false,
                        isPublicChecked: type === 'public',
                        isEditModal:true,
                        queryName:name,
                        queryDescription:description,
                        category:category,
                        isAggregateChecked: isAggregateChecked,
                        isCommunitySharedChecked: isCommunitySharedChecked,
                        associatedNodesEnabled: associatedNodesEnabled,
                        value: dsl,
                        queryId: queryId,
                        staticTemplateFilters: staticTemplateFilters
                        });
    });
  }

  saveTemplate = (idx) => {
	  var saveModal = () => {
	  	this.setState(
	  		{
				  showSaveModal: true,
				  saveSuccessfulMsg: false,
				  isPublicChecked: this.state.isPublicChecked,
				  isEditModal:false,
				  queryName:'',
				  queryDescription:'',
				  category:'',
				  queryId:'',
				  isPublicChecked: this.state.isPublicCheckedList[idx],
				  isAggregateChecked: this.state.isAggregateCheckedList[idx],
				  enableTreeLoadBusyFeedback: true
			});
		this.getTreeFromDSL(this.state.value).then(tree => {
                this.setState({enableTreeLoadBusyFeedback: false, dslConfigArray: this.getConfigArrayFromDSLTree(tree, [], [])});
        });
	  }
	  this.populateTemplate(false, saveModal, idx);
  }

  runTemplate = (idx) =>{
    this.populateTemplate(true, null, idx);
  }
  submitEditAndRunDSL = () =>{
    this.setState({ showEditModal: false, value: this.state.editModel,aggregateActivePage:1,activePage:1 }, () => this.formQueryString(false,false,false));
  }
  showEditDSLModal = (idx) => {
    console.log("enabling DSL edit modal");
    var openModal = () => {
        this.setState({ editModel: this.state.value, enableTreeLoadBusyFeedback: true, showEditModal: true });
    }
    this.populateTemplate(false, openModal, idx);
  }
  closeEditDSLModal = () => {
    console.log("closing DSL edit modal");
    this.setState({ showEditModal: false, enableTreeLoadBusyFeedback: false });
  }
  bindEdits = (e) => {
    this.setState({ editModel: e.target.value });
  }
  populateTemplate = (shouldRun, callback, indx) =>{
	console.log('CustomDSL:populateTemplate this.state>>>>>>>>>>>>>>>>>>>*',this.state);
	let query=this.formFinalTemplateQuery(indx);
	console.log('CustomDSL:query>>>>>>>>>*',query);
	console.log('CustomDSL:query>>>>>>>>>BTOA*',btoa(query));
    this.setState({ value: query,aggregateActivePage:1,activePage:1}, () => {if(shouldRun){this.formQueryString(false,false,false)}else{callback()}});
  }
  formFinalTemplateQuery = (indx)=>{
	console.log('formFinalTemplateQuery>> forming finalQuery before Run scenarios>>>>');
	var query = this.state.templateQueryList[indx];
	for(var i = 0; i < this.state.filterTemplateEntriesList[indx].length; i++){
		let filterTemplateEntries=this.state.filterTemplateEntriesList[indx][i];
		Object.keys(filterTemplateEntries).map((key)=>{
			Object.keys(filterTemplateEntries[key]).map((entry)=>{
				let templateEntry=filterTemplateEntries[key][entry];
				if(templateEntry.name !== ''){
					let templateFilterQuery = "'" + templateEntry.name + "','" + templateEntry.value + "'";
					console.log('Before templateFilterQuery>>>>>',templateFilterQuery);
					let valueArray=templateEntry.value.split('^');
					let typeArray=templateEntry.type.split('^');
					templateFilterQuery = "'" + templateEntry.name + "'";
					let templatekeyValues='';
					for(var x=0;x<valueArray.length;x++){
						if(valueArray[x] !==''){
							if(templatekeyValues === ''){									
								templatekeyValues = (this.state.enableRealTime)?typeArray[x] +"('" + valueArray[x] + "')":"'"+valueArray[x]+"'";
							}else{
								templatekeyValues = (this.state.enableRealTime)?templatekeyValues+","+typeArray[x] +"('" + valueArray[x] + "')":templatekeyValues+",'"+ valueArray[x] + "'";
							}
						}
					}
					templateFilterQuery=templateFilterQuery+","+templatekeyValues;
					console.log('templateFilterQuery>>>>>',templateFilterQuery);
					query = query.replace('$' + (templateEntry.templateKey + 1),templateFilterQuery);
					query = query.replace(/\"/g,'\'');
				}
			})			
		});		
	}
	return query;
  }
  stripFirstCharacter=(str)=>{
	return str.substr(1);
  }
  stripLastCharacter=(str)=>{
	return str.substr(0, str.length - 1);
  }
  stripFirstTwoCharacter(str){
	return str.substr(2);
  }
  updateTemplateFilterValues=(key,templateKey,value,id,idx)=>{
	if(value!==''){
	  var filterTemplateEntriesList = this.state.filterTemplateEntriesList;
	  var filterTemplateHeaderList=this.state.filterTemplateHeaderList;
	  var filterMap = filterTemplateEntriesList[idx];
	  var filterTemplateHeader=filterTemplateHeaderList[idx];
	  let idArray=id.split('_');
	  let ind=parseInt(idArray[idArray.length-1]);
	  let finalSelectedProp='';
	  let existing=false;
	  console.log(ind+'<<<updateTemplateFilterValues>>>>'+key+'<><>',value);
	  console.log(templateKey+'filterMap>>>>>>>>>>>>>>>>',filterMap);
	  Object.keys(filterMap).forEach((index) =>{
		  if(filterMap[index][key]){
			  Object.keys(filterMap[index][key]).forEach((i)=>{
				  if(filterMap[index][key][i].templateKey === templateKey){
					  console.log(key+'<<filterMap[index][key][templateKey]>>>'+filterMap[index][key][i]);
					  let filterValue=filterMap[index][key][i].value.split('^');
					  filterValue[ind]=value;
					  filterMap[index][key][i].value=filterValue.join('^');
					  console.log('Updated Filtered Template Entries map' + JSON.stringify(filterMap));						
					  if(filterMap[index][key][i].name !== '' ){
						  filterTemplateHeader[key]['propName'] = filterMap[index][key][i].name;
						  existing =true;
					  }else{
						  console.log('set listname >>>>***',filterTemplateHeader[key]['propName']);
						  finalSelectedProp=filterTemplateHeader[key]['propName'];
						  let status=false;
						  if(filterTemplateHeader[key]['propName'] !== this.state.filterDisplay){							  
							filterMap[index][key][i].name= filterTemplateHeader[key]['propName'];
							status=true;
						  }else{
							filterMap[index][key][i].name= 'ERROR';
							if(!(this.templateErrorList[idx] && this.templateErrorList[idx].length>0)){
								this.templateErrorList[idx]=[];
							}
							this.templateErrorList[idx].push(key);
						  }
						  let selectedProp=[];
						  console.log('filterTemplateHeader[key][selectedProp]>>>>',filterTemplateHeader[key]['selectedProp']);
						  if(filterTemplateHeader[key]['selectedProp'] && status){
							  selectedProp=filterTemplateHeader[key]['selectedProp'];
							  let indSelect= selectedProp.indexOf(filterTemplateHeader[key]['propName']);
							  if(indSelect !== -1){
								  selectedProp=selectedProp.splice(indSelect,1);
								  filterTemplateHeader[key]['selectedProp']=selectedProp;
							  }					
						  }									
					  }				
					  filterTemplateHeader[key]['enableAnd'] = true;
					  this.updateSavedQueryTemplate('add',key,templateKey,filterMap,filterTemplateHeader,idx);
				  }
			  });				
		  }
	  });
	}
	// this.setState({filterTemplateError: true});     
}
updateSavedQueryTemplate=(action,key,templatekey,templateMaps,templateHeader,idx)=>{
		console.log(action+'updateSavedQueryTemplate>>>>>>>>>>>>>*');
		let templateEntriesList = this.state.filterTemplateEntriesList;
		let filterTemplateHeaderList=this.state.filterTemplateHeaderList;
		let templateEntries = templateEntriesList[idx];
		let filterTemplateHeader= filterTemplateHeaderList[idx];
		let finalSelectedProp='';
		idx=parseInt(idx);
		if(templateMaps){
		  templateEntries=templateMaps;
		}
		if(templateHeader){
		  filterTemplateHeader=templateHeader
		}
		let templateQuery = this.state.templateQueryList[idx];
		if(templateQuery.charAt(templateQuery.length-1) !== ']'){
		  templateQuery=templateQuery+',';
		}	
		let keyact=isNaN(parseInt(key.substr(key.length-2,key.length-1)));
		console.log('keyact>>>>****',keyact);
		console.log('TemplateQuery>>>&&*',templateQuery);
		let nodeInd=0;
		let tempkey =key;
		if(!keyact){
			  let actKey=key.split('-');
			  nodeInd=parseInt(actKey[actKey.length-1]);
			  actKey.splice(actKey.length-1,1);
			  tempkey=actKey.join('-');
		}
		let dslObject=this.dslObjectList[idx];
		if(action === 'add'){
			Object.keys(dslObject).map((nodekey)=>{
			  if(nodekey === key){
				  let tempEntries=[];			 
				  Object.keys(templateEntries).map((index) =>{if(templateEntries[index][key] && nodekey === key){ tempEntries= templateEntries[index][key]}});
				  console.log('tempEntries>>>>',tempEntries); 
				  dslObject[nodekey]['templateEntries']=tempEntries;
				  dslObject[nodekey]['filterTemplateHeader']=filterTemplateHeader[nodekey];
			  }		  
			})
		}else{
		  let findEntry=true;
		  Object.keys(templateEntries).map((index) =>{
			  console.log('templateEntries[index][key]??????',templateEntries[index][key]);
			  if(templateEntries[index][key]){
				  Object.keys(templateEntries[index][key]).map((i)=>{
					  console.log(i+'templateEntries[index][key][i].templateKey>>>',templateEntries[index][key][i]);
					  if(findEntry && templateEntries[index][key][i].templateKey === templatekey){
						  findEntry=false;
						  let name = templateEntries[index][key][i].name;
						  finalSelectedProp=name;
						  templateEntries[index][key].splice(i,1);
						  filterTemplateHeader[key]['enableAnd'] = true;
						  filterTemplateHeader[key]['propName'] = this.state.filterDisplay;
						  let selectedProp=[];
						  console.log('filterTemplateHeader[key][selectedProp]???????',filterTemplateHeader[key]['selectedProp']);
						  if(filterTemplateHeader[key]['selectedProp']){
							  selectedProp=filterTemplateHeader[key]['selectedProp'];
							  let ind= selectedProp.indexOf(name);
							  if(ind !== -1){
								  selectedProp=selectedProp.splice(ind,1);
								  filterTemplateHeader[key]['selectedProp']=selectedProp;
							  }	
						  }
						  if(name=='ERROR'){
							if(this.templateErrorList[idx] && this.templateErrorList[idx].length>0){
								this.templateErrorList[idx].pop();
							}							
						  }
						  console.log('selectedProp>>>>',filterTemplateHeader[key]['selectedProp']);
					  }
				  });	
			  }
		  });
		  Object.keys(dslObject).map((nodekey)=>{
			  if(nodekey === key && !findEntry){
				let tempEntries=[];			 
				Object.keys(templateEntries).map((index) =>{if(templateEntries[index][key] && nodekey === key){ tempEntries= templateEntries[index][key]}});
				console.log('Delete tempEntries>>>>',tempEntries); 
				dslObject[nodekey]['templateEntries']=tempEntries;
				dslObject[nodekey]['filterTemplateHeader']=filterTemplateHeader[nodekey];
			  }		  
		  })
		}
		console.log(action+' .......Update Saved ***************this.dslObject',dslObject);
		Object.keys(dslObject).map((nodekey)=>{
			  //console.log(nodekey+'this.dslObject[nodekey][0]>>>>>',dslObject[nodekey][0]);
			  //console.log('key>>>>',key);
			  if(nodekey === key && dslObject[nodekey][0]){
				  Object.keys(templateEntries).map((index) =>{
					  console.log('templateEntries[index][key]>>>>',templateEntries[index][key]);
					  if(templateEntries[index][key]){
						 let props='{';
						 Object.keys(templateEntries[index][key]).map((i)=>{
							console.log(i+'templateEntries[index][key]>>>>',templateEntries[index][key][i]);
							  let prop='';
							  let newProps=(parseInt(i)!==0)?',\''+templateEntries[index][key][i]['name']+'\'':'\''+templateEntries[index][key][i]['name']+'\'';	
							  props+=newProps;
							  if(templateEntries[index][key][i].templateKey === templatekey){
								  let name=templateEntries[index][key][i]['name']
								  let value=templateEntries[index][key][i]['value'].split('^');
								  let type=templateEntries[index][key][i]['type'].split('^');
								  prop='(\''+name+'\',';
								  for(var x=0;x<value.length;x++){
									  if(this.state.enableRealTime){
										  prop+=type[x]+'(\''+value[x]+'\')';
										  if(x===value.length-1){
											  prop+=')';
										  }else{
											  prop+=',';
										  }	
									  }else{
										  prop+='\''+value[x]+'\'';
										  if(x===value.length-1){
											  prop+=')';
										  }else{
											  prop+=',';
										  }
									  }
								  }
								  let values=dslObject[nodekey][0]['values'];
								  //console.log('values>>>>>',values);
								  if(values && values.length>0){
									let findState=false;
									let errorPropMsg=null;									
									for(var n=0;n<values.length;n++){
										if(values[n].indexOf('!(\''+name+'\'') !==-1){
											values[n]='!'+prop;
											findState=true;
										}else if(values[n].indexOf('(\''+name+'\'') !==-1){
											values[n]=prop;
											findState=true;
										}
										if(values[n].indexOf('(\'ERROR\',') !==-1){
											errorPropMsg=n;
										}
									}
									if(errorPropMsg){
										values.splice(errorPropMsg,1);
									}
									if(!findState){
										values.push(prop);
									}
									dslObject[nodekey][0]['values']=values;									
								 }else{
									dslObject[nodekey][0]['values']=[];
									dslObject[nodekey][0]['values'].push(prop);
								 }
								 //console.log(prop+'this.dslObject[nodekey][0][values]>>>>',dslObject[nodekey][0]['values']);
							  }
						  });
						  props+='}';						  
						  if(action!=='add' && dslObject[nodekey][0]['values']){
							  dslObject[nodekey][0]['values'].splice(idx,1);								
						  }
					  }
				  });
			  }		  
		});
		//console.log('After Setting ***************this.dslObject',dslObject);		
		this.dslObjectList[idx]=dslObject;
		let queryList=this.state.templateQueryList;
		let dslquery=queryList[idx];
		var limitPattern = /limit[\s]\d+|limit\d+/ig
		var limitkey = dslquery.match(limitPattern);		
		//this.tempDslQuery=this.formTempDslQuery(dsl);
		let query=this.formTemplateQuery('savedQuery',idx);
		query=query.replace(/\'(as)\'/g,'\' as \'').replace(/\(\'\s(as)\s\'\)/g,'(\'as\')');
		if(limitkey){
			query+=' '+limitkey[limitkey.length-1];		
		}	
		console.log('query>>>>>>>>>>>>>',query);
		queryList[idx]=query;
		templateEntriesList[idx]=templateEntries;
		filterTemplateHeaderList[idx]=filterTemplateHeader;
		this.setState({filterTemplateEntriesList:templateEntriesList,filterTemplateHeaderList:filterTemplateHeaderList,templateQueryList:queryList}); 
	  
  }	
  capturingGroups=(dsl)=>{
	var capturedGroups=[];
	let findGroup=true;
	var block = dsl;
	do{
		var startIndex = block.indexOf('['),/* index of first bracket */
		currPos = startIndex,
		openBrackets = 0,
		stillSearching = true,
		waitForChar = false;
		if(currPos === -1){
			findGroup=false;
		}
		while (stillSearching && currPos <= block.length) {
		  var currChar = block.charAt(currPos);
		  switch (currChar) {
			  case '[':
				openBrackets++; 
				break;
			  case ']':
				openBrackets--;
				break;			  
			}		  
		  currPos++ 
		  if (openBrackets === 0) { stillSearching = false; } 
		}
		console.log('capturingGroups>>>>>>>>>>>>',block.substring(startIndex , currPos));
		if(block.substring(startIndex , currPos) !==''){
			capturedGroups.push(block.substring(startIndex , currPos));
			block=block.replace(block.substring(startIndex , currPos),'#$')
		}
	}while(findGroup);		
	return capturedGroups;
  }
  formTempDslQuery=(dsl) =>{
	let tempQuery='';
	tempQuery=dsl.replace(/\!\((?:[^>)(]|\((?:[^)(]+)\))*\)/g,'').replace(/\((?:[^>)(]|\((?:[^)(]+)\))*\)/g,'').replace(/\{(.*?)\}/g,'').replace(/\*/g,'').trim('')+',';
	tempQuery = tempQuery.replace(/\s+/g, '');
	tempQuery=tempQuery.replace(/[a-zA-Z0-9*\-]/g,'#').replace(/\!\!/g,'!').replace(/\!\>/g,'>');
	tempQuery=tempQuery.replace(/\#(.*?)(?=\>|\!|\(|\)|\,|\])/g,'#').trim('');
	tempQuery=this.stripLastCharacter(tempQuery);
	return tempQuery;
  }
  loadTemplateForm=(dsl,idx) =>{
	console.log('loadTemplateForm>>>idx>>>>',idx);
	this.dslObject={};
	this.nodeTypeArray=[];
	var limitPattern = /limit[\s]\d+|limit\d+/ig;
	var limitkey = dsl.match(limitPattern);
	if(limitkey){
		dsl = dsl.replace(limitkey[limitkey.length-1],'').trim();
	}
	dsl = this.alterDslQueryByRemoveSpaces(dsl);
	//create placeholders for NodeTypes with Propand Propvalues
	this.tempDslQuery=this.formTempDslQuery(dsl);
	this.tempDslQueryList.push(this.tempDslQuery);
	//Preparinga Json Object to render into Placeholder		
	this.contructDslNodes(dsl,'node',false,false,false,false);
	console.log('dsl>>>>>>>>>>>>>',dsl);
	//Query to replace placeholders with JSON Object values depends on Flow either SavedQuery or TableFilters
	let query=this.formTemplateQuery('savedQuery',idx,true);
	query=query.replace(/\'(as)\'/g,'\' as \'').replace(/\(\'\s(as)\s\'\)/g,'(\'as\')');
	if(limitkey){
		query+=' '+limitkey[limitkey.length-1];		
	}	
	let filterEntries=[];
	let filterTemplateHeader={};
	var errorOccurred=false;
	console.log('before setting DSLOBJECT>>',this.dslObject);
	Object.keys(this.dslObject).map((key)=>{
		filterEntries.push(this.dslObject[key]['filterEntries'][0]);
		filterTemplateHeader[key]= {}
		filterTemplateHeader[key]=this.dslObject[key]['filterTemplateHeader'][key];
		if(!errorOccurred){
			errorOccurred=this.dslObject[key]['errorOccurred'];
		}	
	});	
	let filterEntriesList=[];
	let filterTemplateHeaderList=[];
	let filterTemplateErrorList=[];
	let nodeTypeOfDslTemplateList=[];
	let templateQueryList=[];
	let valueList=[];
	if(idx === 0){
		this.setState({ valueList: [], 
			templateQueryList: [], 
			filterTemplateEntriesList: [],
			filterTemplateHeaderList:[],
			filterTemplateErrorList: [],
			nodeTypeOfDslTemplateList:[]
		});
	}
	filterEntriesList.push(filterEntries);
	filterTemplateHeaderList.push(filterTemplateHeader);
	filterTemplateErrorList.push(errorOccurred);
	nodeTypeOfDslTemplateList.push(this.nodeTypeArray);
	templateQueryList.push(query);
	valueList.push(dsl);
	this.dslObjectList.push(this.dslObject);    
	this.setState({ valueList: valueList, 
		templateQueryList: templateQueryList, 
		filterTemplateEntriesList: filterEntriesList,
		filterTemplateHeaderList:filterTemplateHeaderList,
		filterTemplateErrorList: filterTemplateErrorList,
		nodeTypeOfDslTemplateList:nodeTypeOfDslTemplateList,
		isInitialLoad:false
	},()=>{GeneralCommonFunctions.scrollTo('templateList');});
	
  }
 formTemplateQuery=(flow,idx,state)=>{
	let query='';
	let count = 0;
	let tempDslQueryArr=(idx !== undefined && !state)?this.tempDslQueryList[idx].split('#'):this.tempDslQuery.split('#');
	let newCustomQuery=(idx !== undefined && !state)?this.dslObjectList[idx]:this.dslObject;
	Object.keys(newCustomQuery).map((key)=>{
		query='';
		let newDslObject=newCustomQuery[key][0];
		let filterValues='';
		if(newDslObject){
			//console.log('this>>>>>>>>>>>>>>>>>>>>>>',this);
			if(flow==='savedQuery'){				
				//reformed the DSL Object with Filter Entries and Template Entries
				this.formTemplateFilterValues(newDslObject['values'],newDslObject['nodeName'],key,idx);
				let entries=[];
				if(newCustomQuery[key]['templateEntries']){
					entries=newCustomQuery[key]['templateEntries'];
				}else{
					entries='';
				}
				filterValues=(newDslObject['values']) ? this.replaceFilterValues(newDslObject['values'],entries) :'';
			}else{
				filterValues=(newDslObject['values'])? this.formFilterValues(newDslObject['values']):'';
			}
			query+=newDslObject['nodeName'];
			if(newDslObject['props']){
				query+=newDslObject['props'];
			}
			if(newDslObject['values']){
				query+=filterValues;			
			}
			tempDslQueryArr[count]=tempDslQueryArr[count]+query;
			count++;
		}
	});
	query=tempDslQueryArr.join('');
	return query;
 }
 contructDslNodes=(dsl,type,groupStart,groupEnd,edgeStart,edgeEnd)=>{	    
	console.log(type+'contructDslNodes>>>>>>>>>>>>>>',dsl);	
	dsl=dsl.replace(/\s*\,\s*/g, ',')
	var declareEdgePattern=/\(\>(?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)|\!\(\>(?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/g;
	let localEdges=dsl.match(declareEdgePattern);
	let edgesDsl=dsl;
	if(localEdges){
		this.edgesArray=localEdges.concat(this.edgesArray);
		edgesDsl=dsl.replace(declareEdgePattern,'>@$');
		edgesDsl=edgesDsl.replace(/\!\>\@\$/g,'>!@$');	
	}	
	//capturing relations group b/w [] Parent only 
	let relations=this.capturingGroups(edgesDsl);		
	if(relations){
		this.relationsArray=relations.concat(this.relationsArray);
		for(var z in relations){
			edgesDsl=edgesDsl.replace(relations[z],'#$');				
		}			
	}
	//console.log('edgesDsl to padd getDslNodes>>>>>',edgesDsl);
	this.getDslNodes(edgesDsl,type,groupStart,groupEnd,edgeStart,edgeEnd);
}
	
 getDslNodes=(dsl,type,groupStart,groupEnd,edgeStart,edgeEnd)=>{
	console.log('getDslNodes>>>>',dsl);
	let dslArray=[];
	let localDslNodes='';
	let relations=false;
	let edges=false;
	let traversal=false;
	dslArray = dsl.split('>');
	if(type === 'relationalNode'){
		traversal=(dsl.indexOf('#$') === -1 && dslArray.length>1 && dsl.indexOf('@$') === -1);
	}
	for(var i=0;i<dslArray.length;i++){
		if(dslArray[i] !== ''){
			if(dslArray[i] === '#$'){//RelationalNode
				//relations to be enables
				localDslNodes=this.relationsArray[0];
				console.log(dslArray[i]+'<<<dslArray[i] localDslNodes>>>>>>>****>>>>',localDslNodes);
				localDslNodes=this.stripLastCharacter(this.stripFirstCharacter(localDslNodes));
				type='relationalNode';
				this.relationsArray=this.relationsArray.slice(1,this.relationsArray.length);					
				this.getDslRelationalNodes(localDslNodes,type);
			}else if(dslArray[i].trim() === '@$' || dslArray[i].trim() === '!@$'){//EdgeNode
			//edges should be enable
				localDslNodes=this.edgesArray[0];
				type='edgeNode'
				localDslNodes=this.stripLastCharacter(localDslNodes);
				if(localDslNodes.startsWith('!')){
					localDslNodes=localDslNodes.substr(3);
					type='negEdgeNode';
				}else{
					localDslNodes=localDslNodes.substr(2);
					type='edgeNode';
				}
				this.edgesArray=this.edgesArray.slice(1,this.edgesArray.length);
				this.getDslEdgeNodes(localDslNodes,type);
			}
			//node,traversal,relationalEdges
			let x=i+1;				
			if(dslArray[x] && dslArray[x] === '#$'){
				relations=true;
			}
			if(dslArray[x] && dslArray[x] === '@$'){
				edges=true;
			}				
			let tStart=(parseInt(i) === 0 && traversal)?true:false;
			let tEnd=(parseInt(i) === dslArray.length-1 && traversal)?true:false;
			if(i === dslArray.length-1){
				if(type==='edgeNode' || type === 'negEdgeNode'){
					edgeEnd=true;
					edgeStart=(dslArray.length===1)?true:false;
					groupStart=false;
					groupEnd=false;
				}else if(type==='relationalNode'){
					edgeEnd=false;
					edgeStart=false;							
				}else{
					groupStart=false;
					groupEnd=false;
					edgeEnd=false;
					edgeStart=false;
				}
			}
			if(!(dslArray[i] === '#$' || dslArray[i].trim() === '@$' || dslArray[i].trim() === '!@$')){					
				dslArray[i]=dslArray[i].replace(/\,$/g,'').replace(/\]$/g,'').replace(/\>$/g,'').trim();
				this.formDslObject(dslArray[i],type,groupStart,groupEnd,relations,traversal,tStart,tEnd,edges,edgeStart,edgeEnd);
			}				
		}			
	}
	console.log('<<formDslObject>>>>>',JSON.stringify(this.dslObject));
}
getDslEdgeNodes=(edgesDsl,type)=>{		
	//space for future changes
	this.contructDslNodes(edgesDsl,type,false,false,true,false);
}
getDslRelationalNodes=(relationDsl,type)=>{
	console.log('getDslRelationalNodes>>>>>>>>>>>>',relationDsl)
	//var dslRelationNodes=relationDsl.substring(relationDsl.indexOf('['),relationDsl.lastIndexOf(']')+1);
	let dslRelationNodes=this.capturingGroups(relationDsl);
	let dslRelations= relationDsl;
	if(dslRelationNodes){
		for(var z in dslRelationNodes){
			dslRelations=dslRelations.replace(dslRelationNodes[z],'#$');
		}
		this.relationsArray=dslRelationNodes.concat(this.relationsArray);
	}
	let relationsList=dslRelations.replace(/\((?:[^)(]+|\((?:[^)(]+)\))*\)/g,'').replace(/\{(.*?)\}/g,'').trim('').replace(/\>\#\$/g,'').replace(/\>\@\$/g,'').replace(/\>\!\@\$/g,'').replace(/\!/g,'').split(',');
	dslRelations=','+dslRelations+'&&';
	let groupStart=false;
	let groupEnd=false;		
	//relationsList: have all Relations like node [node1>#$,node2,node3>node4]: possible to contain EdgeNodes,Traversal condition and inner relationNodes
	for(var k in relationsList){
		console.log(k+'relationsList>>>>**',relationsList);
		if(parseInt(k)===0){
			groupStart=true;
			groupEnd=false;
		}else if(parseInt(k) === relationsList.length-1){
			groupStart=false;
			groupEnd=true;
		}else{
			groupStart=false;
			groupEnd=false;
		}
		if(relationsList.length === 1){
			groupStart=true;
			groupEnd=true;
		}
		var relationPattern='';
		
		console.log('dslRelations>>>>>>>>>>>>',dslRelations);
		let pattern=relationsList[k]+"(.*?)>\\#\\$(?=\\,|\\&&)|"+relationsList[k]+"(.*?)>\\@\\$(?=\\,|\\&&)|"+relationsList[k]+"(.*?)>\\!\\@\\$(?=\\,|\\&&)";
		console.log('pattern>>>>>',pattern);
		let relationP1 = new RegExp(pattern, 'g');					
		let findDslRelation=dslRelations.match(relationP1);
		console.log('findDslRelation>>>>>>',findDslRelation);
		if(findDslRelation){//dslRelations.indexOf(relationsList[k]+'>#') !==-1 || dslRelations.indexOf(relationsList[k]+'>@$') !==-1){
			relationPattern="(?:[^-]"+relationsList[k].split('>')[0]+"(.*?)(?=\,[a-z]|&&))|"+"(?:[^-]"+relationsList[k].split('>')[0]+"(?=\,[a-z]|&&))";
		}else if(dslRelations.indexOf(relationsList[k]+',#') !== -1){
			relationPattern="(?:[^-]"+relationsList[k]+"(.*?)(?=\,#))|"+"(?:[^-]"+relationsList[k]+"(?=\,#))";
		}else if(relationsList[k] !== '#$'){
			relationPattern="(?:[^-|^>]"+relationsList[k]+"(.*?)(?=\,[a-z]|>|&&))|"+"(?:[^-|^>]"+relationsList[k]+"(?=\,[a-z]|>|&&))";
		}
		if(relationsList[k] !== '#$'){		
			console.log(k+'for relationPattern>>>',relationPattern);
			console.log(k+'for dslRelations>>>>',dslRelations);
			let relationPatternExp = new RegExp(relationPattern, 'g');					
			let dslRelationArray=dslRelations.match(relationPatternExp);
			console.log(k+'for dslRelationArray>>>>',dslRelationArray);
			if(dslRelationArray){
				for(var j in dslRelationArray){	
					console.log('dslRelationArray[j]>>>',dslRelationArray[j]);						
					let dslRelationNode=null;					
					dslRelationArray[j]= dslRelationArray[j].substr(1);
					dslRelations=dslRelations.replace(dslRelationArray[j],'@');
					console.log('groupStart>>>>>>>>>>',groupStart);
					this.contructDslNodes(dslRelationArray[j],type,groupStart,groupEnd);						
				}
			}else{				
				var relationPatternArray=relationsList[k].split('>');
				relationPattern=''; 
				for(var x=0;x<relationPatternArray.length;x++){
					if(x === 0){
						relationPattern=relationPatternArray[x]+'(.*?)';
					}else{
						relationPattern=relationPattern+'>'+relationPatternArray[x]+'(.*?)';
						if(x===relationPatternArray.length-1){
							relationPattern=relationPattern+'(?=\,[a-z]|&&)';
						}						
					}
				}
				console.log('relationPattern>>>>>>',relationPattern);
				relationPatternExp = new RegExp(relationPattern, 'g');
				dslRelationArray=dslRelations.match(relationPatternExp);
				if(dslRelationArray){
					dslRelations=dslRelations.replace(dslRelationArray[0],'@');
					console.log('dslRelationArray!!!!!!!!!!!!!>>>>>',dslRelationArray);
					this.contructDslNodes(dslRelationArray[0],type,groupStart,groupEnd);
				}				
			}			
		}else{
			let localDslNodes=this.relationsArray[0];
			relationsList[k]=this.stripLastCharacter(this.stripFirstCharacter(localDslNodes));
			this.relationsArray=this.relationsArray.slice(1,this.relationsArray.length);
			console.log('relationsList[k]>***>>>',relationsList[k]);
			//dslRelations=dslRelations.replace(dslRelationArray[j],'@');
			this.contructDslNodes(relationsList[k],type,groupStart,groupEnd);
			
		}				
	}
}
formDslObject=(dslArray,type,groupStart,groupEnd,relationState,traversal,tStart,tEnd,edges,eStart,eEnd,id)=>{
	let nodeType=dslArray.replace(/\((?:[^)(]+|\((?:[^)(]+)\))*\)/g,'').replace(/\{(.*?)\}/g,'').replace(/\!/g,'').trim('');
	let props=dslArray.match(/\{(.*?)\}/g);
	let propValues=dslArray.match(/\((?:[^)(]+|\((?:[^)(]+)\))*\)|\!\((?:[^)(]+|\((?:[^)(]+)\))*\)/g);
	var entries=[]
	var entry = {};
	entry.type = type;
	entry.relationsStart = groupStart;
	entry.relationsEnd= groupEnd;
	entry.relations=relationState;
	entry.nodeName = nodeType;
	entry.props=props;
	entry.traversal=traversal;
	entry.traversalStart=tStart;
	entry.traversalEnd=tEnd;
	entry.edgeEnable=(edges)?edges:false;
	entry.edgeStart=(eStart)?eStart:false;
	entry.edgeEnd=(eEnd)?eEnd:false;
	entry.values=propValues;
	entries.push(entry);
	let entityId=nodeType.replace(/\*/g,'');
	if(!this.nodeTypeArray.includes(entityId)){
		this.nodeTypeArray.push(entityId);
		this.dslObject[entityId] = entries;
	}else{
		let newNodeType='';
		let repeatMode=true;
		for(var n=1;n<=this.nodeTypeArray.length;n++){
			if(!this.nodeTypeArray.includes(entityId+'-'+n) && repeatMode){
				newNodeType=entityId+'-'+n;	
				repeatMode=false;
			}
		}
		this.nodeTypeArray.push(newNodeType);
		this.dslObject[newNodeType] = entries;
	}		
	console.log('nodeTypeArray>>>>',this.nodeTypeArray);
	console.log('this.dslObject>>>>',this.dslObject);	
}
formFilterValues=(propValues)=>{
	let templateQuery='';
	let negQuery='';	
	for(var k = 0; k < propValues.length; k++){
		if(propValues[k].indexOf('!') !== -1){
			negQuery += propValues[k];
		}else{
			templateQuery += propValues[k];
		}		
	}
	if(negQuery!==''){
		templateQuery+=negQuery;
	}
	console.log('templateQuery>>>>>>>>>>>>',templateQuery);
	return templateQuery;
}
replaceFilterValues=(propValues,entries)=>{
	console.log(propValues+'<<<propValues>>>>>',entries);
	let templateQuery='';
	let negQuery='';
	let count=1;
	for(var k = 0; k < propValues.length; k++){
		let templatekey=(entries)?entries[k].templateKey+1:count;
		if(propValues[k].indexOf('!') !== -1){
			negQuery += "!($" + templatekey + ")";
		}else{
			templateQuery += "($" + templatekey + ")";
		}	
		count++;	
	}
	if(negQuery!==''){
		templateQuery+=negQuery;
	}
	console.log('templateQuery>>>>>>>>>>>>',templateQuery);
	return templateQuery;
}
formTemplateFilterValues=(propvalues,nodeName,nodeId,idx)=>{
	let filterTemplateHeader = {};
	let filterEntries=[];
	var spaceRemoverPattern=/\,\s/g;
	var errorOccurred = false;
	var filterTypeDisplayArray = this.state.filterTypeDisplayList;
	let filterTypeDisplay= {'default':'Filter Type'};
	if(!filterTypeDisplayArray[idx] || filterTypeDisplayArray[idx] === undefined){
		filterTypeDisplayArray.push(filterTypeDisplay);
	}
	var entries = [];
	var filterTypeEntries =[];
	var selectedProp=[];
	if(propvalues){
		for(var i = 0; i < propvalues.length; i++){
			console.log('propvalues['+i+']>>>>',propvalues[i]);
			var entry = {};
			let propVal = '';
			if(propvalues[i].indexOf('!') !==-1){
				propVal=this.stripLastCharacter(this.stripFirstTwoCharacter(propvalues[i].trim()));
			}else{
				propVal=this.stripLastCharacter(this.stripFirstCharacter(propvalues[i].trim()));
			}				
			propVal = propVal.replace(spaceRemoverPattern,',');
			//console.log('propVal>>>>>>>>>>>',propVal);			
			var matchesList = propVal.split(/',|\),/g)
			//console.log('matchesList>>>>',matchesList);									
			let type='';
			let value='';
			let errorFound=true;
			let entryState=true;
			for(var n=0;n<matchesList.length;n++){
				let scenario=true;
				let found=true;
				if(n==0){
					entry.name = this.stripFirstCharacter(matchesList[n].trim());
					selectedProp.push(this.stripFirstCharacter(matchesList[n].trim()));
				}else{
					let obj={};
					var lastChar=matchesList[n].charAt(matchesList[n].length-1);							
					for(var x in filterTypeList){
						if(found){
							let pattern= new RegExp('^'+filterTypeList[x]+'\\((.*?)', 'g');	
							var filterExist=matchesList[n].match(pattern);
							//console.log(matchesList[n]+'filterExist>>>>>',filterExist);
							if(filterExist){
								var nodevalue='';
								if(lastChar===')'){
									nodevalue=matchesList[n].replace(filterTypeList[x],'').replace(/\(\'/,'').replace(/\'\)/,'');
								}else{
									nodevalue=this.stripLastCharacter(matchesList[n].replace(filterTypeList[x],'').replace(/\(\'/,''));
								}
								//console.log('before srtip>>>',nodevalue);					
								type=(type==='')?filterTypeList[x]:type+'^'+filterTypeList[x];
								value=(value==='')?nodevalue:value+'^'+nodevalue;
								scenario=false;
								found=false;
								errorFound=false;
								entryState=false;					
								obj[entry.templateKey+1] = filterTypeList[x];
								filterTypeEntries.push(obj);
								console.log('filterTypeDisplayArray....>*',filterTypeEntries);					
							}
						}			
						console.log(found+'found>>>>>>>>>>>>',value);
					}
					if(scenario){
						console.log('inside else');
						type=(type==='')?'EQ':type+'^'+'EQ';						
						let val=this.stripFirstCharacter(matchesList[n].trim());
						if(lastChar == '\''){
							val=this.stripLastCharacter(val);
						}
						value=(value==='')?val:value+'^'+val;
						entryState=false;
						found=false;
						errorFound=false;
					}			
				}
			}
			if(!entryState){
				entry.type =type;
				entry.value =  value;
				entry.templateKey = i;
				entries.push(entry);		
			}
			if(errorFound && !errorOccurred){
				errorOccurred=true;
			}
		}			
	}
	console.log('Initial Filtered Template Entries ' + JSON.stringify(entries));
	//nodeTypeOfDsl.push(nodeTypes[z]);
	let obj = {};
	obj[nodeId] = entries;
	filterTemplateHeader[nodeId]= {};
	filterTemplateHeader[nodeId]['enableAnd'] = true;
	filterTemplateHeader[nodeId]['propName'] = this.state.filterDisplay;
	filterTemplateHeader[nodeId]['selectedProp']=selectedProp;
	filterEntries.push(obj)
	filterTypeDisplayArray[idx][nodeId] = filterTypeEntries;
	let dslObject=this.dslObjectList[idx];
	if(dslObject){
		dslObject[nodeId]['filterTemplateHeader']= filterTemplateHeader;
		dslObject[nodeId]['filterEntries']=filterEntries;
		dslObject[nodeId]['errorOccurred']=errorOccurred;
		this.dslObjectList[idx]=dslObject;
	}else{
		this.dslObject[nodeId]['filterTemplateHeader']= filterTemplateHeader;
		this.dslObject[nodeId]['filterEntries']=filterEntries
		this.dslObject[nodeId]['errorOccurred']=errorOccurred;
	}		
  }
  
  onAssociatedNodesCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
      }else {
        cbValue = false;
      }
      this.setState({ associatedNodesEnabled: cbValue });
  }
  onAggregateCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
        this.setState({associatedNodesEnabled: false});
      }else {
        cbValue = false;
      }
      this.setState({ isAggregateChecked: cbValue });
  }
  onPublicCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
        this.setState({ isPublicChecked: cbValue, isCommunitySharedChecked: false });
      }else {
        cbValue = false;
        this.setState({ isPublicChecked: cbValue });
      }
  }
  onMergedTabsCheckbox(e){
	var cbValue = false;
	if (e.target.checked) {
	  cbValue = true;
	  this.setState({ isMergedTabsChecked: cbValue});
	}else {
	  cbValue = false;
	  this.setState({ isMergedTabsChecked: cbValue });
	}
  }
  onGenerateEmailButton(){	
	let path='email-bulk-dsl-to-excel';
	this.generatebulkDslToExcel(path,true);	
  }
  onCommunitySharedCheckbox(e) {
      var cbValue = false;
      if (e.target.checked) {
        cbValue = true;
      }else {
        cbValue = false;
      }
      this.setState({ isCommunitySharedChecked: cbValue });
  }
  onDslConfigCheckbox(e, key) {
        var cbValue = false;
        var staticTemplateFilters = this.state.staticTemplateFilters;
        if (e.target.checked) {
          cbValue = true;
          staticTemplateFilters = staticTemplateFilters.filter(e => e !== key);
        }else {
          cbValue = false;
          staticTemplateFilters.push(key);
        }
        this.setState({ staticTemplateFilters: staticTemplateFilters });
    }
  handleOnFilter = (columnFilter,value) =>{
	console.log('handleOnFilter to Re-render', this.state.columnFilter);
	var applyState = true;
	if(value === ''){
		for(var i= 0; i < columnFilter.length; i++){
			var x = columnFilter[i];		
			console.log('handleOnfilter ColumnFilterList.....',Object.keys(x));
			Object.keys(x).forEach(function(key){
				if(x[key] !==''){
					applyState=false;
				}
			});
		}
	}else{
		applyState = false;
	}
	
    this.setState({columnFilter : columnFilter,reRender:true,disableFilter: applyState});
  }
  
  alterDslQueryByRemoveSpaces = (dslQuery) =>{
	    var p2='';
		if((dslQuery.indexOf('(>') !==-1) || (dslQuery.indexOf('!(>') !==-1)){
			p2=/\((?:[^>)(]|\((?:[^)(]+)\))*\)/g;
		}
		else{
			p2 = /\((?:[^)(]+|\((?:[^)(]+)\))*\)/g;
		}
		var prop = dslQuery.match(p2);
		var spacepattern = /\s(?!(^)]*\()/g;		
		var newDslQuery='';
		if(prop && prop.length > 0){
			var x = dslQuery.replace(p2,'{*$}');
			var matchStr = x.replace(spacepattern,'');			
			var propArray=matchStr.split('{*$}');			
			for(var i in prop){
				newDslQuery=newDslQuery+propArray[i]+prop[i];
			}
			newDslQuery = newDslQuery + propArray[propArray.length-1];
		}else{
			newDslQuery = dslQuery.replace(spacepattern,'');
		}
		newDslQuery = newDslQuery.trim();
		console.log('New DSl Query after alterDslQueryByRemoveSpaces>>>>>>',newDslQuery);
		return newDslQuery;
  }
 
  isTableFilterForAggregation = (columnFilterList,columnsList) => {
	console.log('isTableFilterForAggregation:aggregateTableFilterColumns>>>>>>',this.state.aggregateTableFilterColumns);
	//console.log('isTableFilterForAggregation:columnFilterList>>>>>>>>',columnFilterList);
	var nodeTypeArray = [];
	var columnsList = {};
	var filterMessage = {};
	var j = 0;	
	for(var i= 0; i < columnFilterList.length; i++){
		var x = columnFilterList[i];		
		console.log('isTableFilterForAggregation:Aggregate columnFilterList.....',Object.keys(x));
		var  propValue = '';
		Object.keys(x).forEach((key)=>{
			var grabNode = key.split("|");
			let indx=false;
			let index='';
			if(nodeTypeArray.indexOf(grabNode[0]) === -1){
				nodeTypeArray.push(grabNode[0]);
				j = j + 1;
				indx=true;
				index=j-1;
			}else{
				index=nodeTypeArray.indexOf(grabNode[0]);
			}
			
			if(!columnsList[nodeTypeArray[index]]){
				columnsList[nodeTypeArray[index]] = [];
			}
			if(!filterMessage[nodeTypeArray[index]]){
				filterMessage[nodeTypeArray[index]]=[];
			}
			let col='';
			if(this.tableFilterAliasColumns[grabNode[0]][0] && this.tableFilterAliasColumns[grabNode[0]][0][grabNode[1]]){
				col=this.tableFilterAliasColumns[grabNode[0]][0][grabNode[1]];
			}else{
				col=grabNode[1];
			}
			if(columnsList[nodeTypeArray[index]].indexOf(col) === -1){
				columnsList[nodeTypeArray[index]].push(col);
				if(x[key] != ''){
					let filterMsg = '';
					if(this.state.enableRealTime){
						filterMsg='(\''+col +'\'' + ',' + TABULAR_FILTER_TYPE+'(\'' + x[key]+ '\'))';
					}else{
						filterMsg='(\''+col +'\'' + ',' + '\'' + x[key] + '\')';
					}	
					filterMessage[nodeTypeArray[j-1]].push(filterMsg);
				}
			}
			propValue=x[key];			
		});					
	}
	console.log('isTableFilterForAggregation:nodeTypeArray><><><>',nodeTypeArray);	
	console.log('isTableFilterForAggregation:columnsList<><><>',columnsList);
	console.log('isTableFilterForAggregation:filterMessage>>>>>>>>',filterMessage);
	let dslQuery = this.state.value;
	var limitPattern = /limit[\s]\d+|limit\d+/ig
	var limitkey = dslQuery.match(limitPattern);
	if(limitkey){
		dslQuery = dslQuery.replace(limitkey[limitkey.length-1],'').trim();
	}
	dslQuery = this.alterDslQueryByRemoveSpaces(dslQuery);
	//New adding
	this.dslObject={};
	this.nodeTypeArray=[];
	//create placeholders for NodeTypes with Propand Propvalues
	this.tempDslQuery=this.formTempDslQuery(dslQuery);
	//Preparing Json Object to render into Placeholder		
	this.contructDslNodes(dslQuery,'node',false,false,false,false);
	console.log('dslQuerydsl>>>>>>>>>>>>>',dslQuery);		
	//adding	
	Object.keys(this.dslObject).map((nodekey)=>{		
		let nodeNo=parseInt(nodekey.substr(nodekey.length-2,nodekey.length-1).replace(/\-/g,''));
		console.log('nodeNo>>>>>>>>>>>>>>',nodeNo);
		let keyact=isNaN(nodeNo);
		let nodeType=nodekey;
		let actKey=nodekey.split('-');
		console.log(nodeType+'>>>>nodeType<<<<nodeType>>>>',actKey);
		if(!keyact){
			actKey.splice(actKey.length-1,1);
			nodeType=actKey.join('-')+nodeNo;
		}
		if(!nodeTypeArray.includes(nodeType) && nodeTypeArray.includes(actKey.join('-'))){
			nodeType=actKey.join('-');
		}
		console.log('nodeType>>>>>>>>>>',nodeType);
		var columns = columnsList[nodeType];
		var filterMsg= filterMessage[nodeType];
		console.log('CustomDsl js filterMsg:',filterMsg);
		if(nodeType && this.dslObject[nodekey][0]){
			if(filterMsg && filterMsg.length>0){
				for(var i=0;i<filterMsg.length;i++){
					let values=this.dslObject[nodekey][0]['values'];
					let nonExist=true
					let columnCompare=filterMsg[i].split(',')[0];
					if(values && values.length>0){
						for(var n=0;n<values.length;n++){
							console.log('values[n].indexOf(columnCompare)>>>>',values[n].indexOf(columnCompare));
							if(values[n].indexOf(columnCompare) !==-1 && values[n].indexOf('!'+columnCompare) ===-1){
								values[n]=filterMsg[i];
								nonExist=false;
							}
						}
						if(nonExist){
							this.dslObject[nodekey][0]['values'].push(filterMsg[i]);	
						}else{
							this.dslObject[nodekey][0]['values']=values;	
						}
					}else{
						this.dslObject[nodekey][0]['values']=[];
						this.dslObject[nodekey][0]['values'].push(filterMsg[i]);
					}
				}
			}
		}
	});
	this.dslObjectList =[];
	this.dslObjectList.push(this.dslObject);
	//Query to replace placeholders with JSON Object values depends on Flow either SavedQuery or TableFilters	
	let newDslQuery=this.formTemplateQuery('tableFilter');
	newDslQuery=newDslQuery.replace(/\'(as)\'/g,'\' as \'').replace(/\(\'\s(as)\s\'\)/g,'(\'as\')');
	if(limitkey){
		newDslQuery+=' '+limitkey[limitkey.length-1];
	}
	console.log('query>>>>>>>>>>>>>>>>>>>>>****',newDslQuery);
	this.setState({value : newDslQuery, viewName: "CellLayout", aggregateActivePage:1}, function () { this.formQueryString(false,false,false); }.bind(this));
	//End	
  }

  isTableFilterApply = (columnFilterList,nodeTypeList,columnsList,aliasColumnList) => {
    console.log('CustomDSL js ....columnFilterList:',columnFilterList);
	console.log('CustomDSL js .... nodeTypeList:',nodeTypeList);
	var nodeTypeListArray = [];
	if(!Array.isArray(nodeTypeList)){
		nodeTypeListArray.push(nodeTypeList);
		nodeTypeList = nodeTypeListArray;
	}
	console.log('CustomDSL js .... nodeTypeList After set:',nodeTypeList);
	var dslQuery = this.state.value;
	var limitPattern = /limit[\s]\d+|limit\d+/ig
	var limitkey = dslQuery.match(limitPattern);
	if(limitkey){
		dslQuery = dslQuery.replace(limitkey[limitkey.length-1],'').trim();
	}
	dslQuery = this.alterDslQueryByRemoveSpaces(dslQuery);
	//New adding
	this.dslObject={};
	this.nodeTypeArray=[];
	//create placeholders for NodeTypes with Propand Propvalues
	this.tempDslQuery=this.formTempDslQuery(dslQuery);
	//Preparinga Json Object to render into Placeholder		
	this.contructDslNodes(dslQuery,'node',false,false,false,false);
	console.log('dslQuerydsl>>>>>>>>>>>>>',dslQuery);		
	//adding	
	Object.keys(this.dslObject).map((nodekey)=>{
		var nodeType=this.dslObject[nodekey][0]['nodeName'].replace(/\*/g,'');
		console.log('nodeType>>>>>>>>>>',nodeType);
		var columnFilter = (columnFilterList[nodeType])?columnFilterList[nodeType][0]:[];
		var aliasColumnFilters = (aliasColumnList[nodeType])?aliasColumnList[nodeType][0]:[];
		console.log('CustomDsl js columnFilter:',columnFilter);
		var columns = columnsList[nodeType];
		console.log('CustomDsl js Columns:',columns);
		if(columns && columnFilter.length>0){
			for(var i=0;i<columns.length;i++){
				console.log(columnFilter[i]+'<<<<<<columnFilter[i]columns[i].value>>>>',columns[i]);
				var colAliasFilter='';
				for(var z=0;z<aliasColumnFilters.length;z++){
					if(aliasColumnFilters[z][columns[i].value]){
						colAliasFilter=aliasColumnFilters[z][columns[i].value];
					}				
				}		
				var colFilterValue = columnFilter[i][columns[i].value];      
				if(colFilterValue != ""){        
					let filterMsg = '';
					let col=(colAliasFilter)?colAliasFilter:columns[i].value;
					if(this.state.enableRealTime){
						filterMsg='(\''+col +'\'' + ',' + TABULAR_FILTER_TYPE+'(\'' + colFilterValue + '\'))';
					}else{
						filterMsg='(\''+col +'\'' + ',' +'\'' + colFilterValue + '\')';
					}				
					let values=this.dslObject[nodekey][0]['values'];
					let nonExist=true;
					if(values && values.length>0){
						for(var n=0;n<values.length;n++){
							if(values[n].indexOf('(\''+col+'\'') !==-1 && values[n].indexOf('!(\''+col+'\'') ===-1){
								values[n]=filterMsg;
								nonExist=false;
							}
						}
						if(nonExist){
							this.dslObject[nodekey][0]['values'].push(filterMsg);	
						}else{
							this.dslObject[nodekey][0]['values']=values;	
						}
					}else{
						this.dslObject[nodekey][0]['values']=[];
						this.dslObject[nodekey][0]['values'].push(filterMsg);
					}
				}
			}
		}
	});
	//Query to replace placeholders with JSON Object values depends on Flow either SavedQuery or TableFilters	
	this.dslObjectList =[];
	this.dslObjectList.push(this.dslObject);
	let newDslQuery=this.formTemplateQuery('tableFilter');
	newDslQuery=newDslQuery.replace(/\'(as)\'/g,'\' as \'').replace(/\(\'\s(as)\s\'\)/g,'(\'as\')');
	if(limitkey){
		newDslQuery+=' '+limitkey[limitkey.length-1];
	}
	console.log('query>>>>>>>>>>>>>>>>>>>>>****',newDslQuery);
	this.setState({value : newDslQuery, viewName: "CellLayout", activePage:1}, function () { this.formQueryString(false,false,false); }.bind(this));
	//End
  }
  
  onTargetMenuOfFilterTypes = (listName,id) => {
	console.log('onTargetMenuOfFilterTypes>>>>',listName);
	let idArray=id.split('#');
	let key=idArray[0];
	let templateKey=parseInt(idArray[1]);
	let filterTypeIndex = parseInt(idArray[2]);
	let idx= parseInt(idArray[3]);
	var filterTypeDisplayList = this.state.filterTypeDisplayList;	
	var filterTypeDisplayArray = filterTypeDisplayList[idx];
	Object.keys(filterTypeDisplayArray).map((entry) => {
		if(entry === key){
			console.log('filterTypeDisplayArray.entry....',filterTypeDisplayArray[entry]);
			if(filterTypeDisplayArray[entry][templateKey]){
				filterTypeDisplayArray[key][templateKey] = listName;
			}else{
				let obj={};
				obj[templateKey+1]=listName;
				filterTypeDisplayArray[key].push(obj);
			}
		}
	});	
	let filterTemplateEntriesList =	this.state.filterTemplateEntriesList;
	var filterTemplateEntriesArray = filterTemplateEntriesList[idx];	
	Object.keys(filterTemplateEntriesArray).map((entry)=>{
		if(filterTemplateEntriesArray[entry][key]){
			Object.keys(filterTemplateEntriesArray[entry][key]).map((ind) =>{
				if(filterTemplateEntriesArray[entry][key][ind].templateKey === templateKey){
					let type=filterTemplateEntriesArray[entry][key][ind].type.split('^');
					if(type[filterTypeIndex]){
						type[filterTypeIndex]=listName
					}else{
						type.push(listName);
					}
					filterTemplateEntriesArray[entry][key][ind].type=type.join('^');
				}
			})
		}
	});
	console.log('onTargetMenuOfFilterTypes filterTemplateEntriesArray>>>',filterTemplateEntriesArray);
	filterTemplateEntriesList[idx]=filterTemplateEntriesArray;
	filterTypeDisplayList[idx]=filterTypeDisplayArray;
	this.setState({filterTypeDisplayList:filterTypeDisplayList,filterTemplateEntriesList:filterTemplateEntriesList});
  }
  filterTags = (type,templateKey,key,idx) =>{
	console.log(key+'<<<filterTags>>>>>*',type);
	let filterType = (type === '')? this.state.filterTypeDisplayList[idx]['default']:type;
	let filterTag = '';
	if(APERTURE_SERVICE && this.state.enableRealTime){
		console.log(filterType+'before passing Filter>*',this.state);
		let filterTypesArray=filterType.split('^');	
		let filters = Object.keys(filterTypesArray).map((index)=>{
						return  <div style={{margin:'0px 0px 0px 5px'}}>
									<label>
										<FilterTypes param={this.state}
													selectedFilter={filterTypesArray[index]}
													id={key+'#'+templateKey+'#'+index+'#'+idx}
													onMenuSelect={this.onTargetMenuOfFilterTypes} />
									</label>
								</div>
						});
		filterTag=<td width='20%'>{filters}</td>;
	}
	return filterTag;
  }
  populateFilteredColumnOptions = (nodekey,indx) =>{
	let keyact=isNaN(parseInt(nodekey.substr(nodekey.length-2,nodekey.length-1)));
	let actColumns ='';
	if(keyact){
		actColumns =this.populateColumnOptions(nodekey);//this.populateColumnOptions(key);
	}else{
		let actKey=nodekey.split('-');
		actKey.splice(actKey.length-1,1);
		actColumns =this.populateColumnOptions(actKey.join('-'));
	}	 
	let filterTemplateEntries=this.state.filterTemplateEntriesList[indx];
	let filterTemplateHeader=this.state.filterTemplateHeaderList[indx];
	let selectedColumns=[];
	Object.keys(filterTemplateEntries).map((index) => {
		let filterTemplateEntry = filterTemplateEntries[index];
		Object.keys(filterTemplateEntry).map((key) =>{
			let filterTemplateEntryKey=filterTemplateEntry[key];
			if(nodekey === key){
				Object.keys(filterTemplateEntryKey).sort().map((entryKey, entry) => {
					if(filterTemplateEntryKey[entryKey].name !==''){
						let index=actColumns.indexOf(filterTemplateEntryKey[entryKey].name);
						actColumns.splice(index,1);
						selectedColumns.push(filterTemplateEntryKey[entryKey].name);				
					}
				});
				filterTemplateHeader[key]['selectedProp']=selectedColumns;
			}			
		});
	});
	return actColumns;
  };
  /**AND OR functionality */
  addAndTemplate = (key,idx) =>{
	console.log('addAndTemplate:key',key);
	let templateEntriesList = this.state.filterTemplateEntriesList;
	let filterTemplateHeaderList= this.state.filterTemplateHeaderList;
	let templateEntries = this.state.filterTemplateEntriesList[idx];
	let filterTemplateHeader= this.state.filterTemplateHeaderList[idx];
	Object.keys(templateEntries).map((index) =>{
		Object.keys(templateEntries[index]).map((entryKey)=>{
			if(entryKey === key){
				let length=templateEntries[index][entryKey].length;
				let tempKey = (length===0)?length:templateEntries[index][entryKey][length-1].templateKey+1;
				let obj ={}
				obj['name']='';
				obj['value']='';
				obj['type']=(this.state.enableRealTime)?'EQ':'';
				obj['templateKey']=tempKey;
				obj['addition']=true;
				templateEntries[index][entryKey].push(obj);
				//templateEntries[index][entryKey]['enableAnd']=false;
				filterTemplateHeader[key]['enableAnd'] = false;
				filterTemplateHeader[key]['propName'] = this.state.filterDisplay;
			}
		});
	});
	templateEntriesList[idx]=templateEntries;
	filterTemplateHeaderList[idx]=filterTemplateHeader;
	this.setState({filterTemplateHeaderList:filterTemplateHeaderList,filterTemplateEntriesList:templateEntriesList});
  }
  addOrTemplate = (key,name,templateKey,idx) =>{
	console.log('addOrTemplate: key',key);
	let templateEntriesList = this.state.filterTemplateEntriesList;
	let templateEntries = templateEntriesList[idx];
	Object.keys(templateEntries).map((index) =>{
		Object.keys(templateEntries[index]).map((entryKey)=>{
			let templateEntry=templateEntries[index][entryKey];
			if(entryKey === key){
				Object.keys(templateEntry).map((entry)=>{
					if(templateEntry[entry].templateKey === templateKey){
						let value = templateEntry[entry].value;
						let type = templateEntry[entry].type;
						templateEntry[entry].value=value+'^';
						let fType=(this.state.enableRealTime)?'EQ':'';
						templateEntry[entry].type=type+'^'+fType;
						templateEntry[entry].name = name;
					}
				})
			}
		});
	});
	console.log('addOrTemplate templateEntries>>>>',templateEntries);
	templateEntriesList[idx]=templateEntries;
	this.setState({filterTemplateEntriesList:templateEntriesList});
  }
  deleteOrTemplate = (key,templatekey,id,idx) =>{
	console.log('deleteOrTemplate');
	let templateEntriesList = this.state.filterTemplateEntriesList;
	let templateEntries = templateEntriesList[idx];
	let delIndx=parseInt(id.split('-')[1]);
	Object.keys(templateEntries).map((index) =>{
		if(templateEntries[index][key]){
			Object.keys(templateEntries[index][key]).map((i)=>{
				if(templateEntries[index][key][i].templateKey===templatekey){
					let valueArray = templateEntries[index][key][i].value.split('^');
					let typeArray = templateEntries[index][key][i].type.split('^');
					valueArray.splice(delIndx,1);
					typeArray.splice(delIndx,1)
					console.log('valueArray>>>>>>',valueArray);
					templateEntries[index][key][i].value=valueArray.join('^');
					templateEntries[index][key][i].type=typeArray.join('^');
				}
			})			
		}		
	});
	console.log('deleteOrTemplate templateEntries>>>>',templateEntries);
	templateEntriesList[idx]=templateEntries;
	this.setState({filterTemplateEntriesList:templateEntriesList});
  }
  updatePropertyFilter = (listName,idkey) =>{
	console.log('updatePropertyFilter:',listName)
	let keys=idkey.split('#');
	let key=keys[0];
	let idx=parseInt(keys[2]);
	let templateKey=parseInt(keys[1]);
	let filterTemplateHeaderList = this.state.filterTemplateHeaderList;
	let filterTemplateHeader= filterTemplateHeaderList[idx];
	var filterTemplateEntriesList = this.state.filterTemplateEntriesList;
	var filterMap = filterTemplateEntriesList[idx];	  
	filterTemplateHeader[key]['propName']=listName;
	//this.setState({filterTemplateHeader:filterTemplateHeader});	
	let status=false;
	Object.keys(filterMap).forEach((index) =>{
		if(filterMap[index][key]){
			Object.keys(filterMap[index][key]).forEach((i)=>{
				if(filterMap[index][key][i].templateKey === templateKey){
					if(filterMap[index][key][i].name === 'ERROR'){
						filterMap[index][key][i].name= listName;									
						let selectedProp=[];
						console.log('filterTemplateHeader[key][selectedProp]>>>>',filterTemplateHeader[key]['selectedProp']);
						if(filterTemplateHeader[key]['selectedProp']){
							selectedProp=filterTemplateHeader[key]['selectedProp'];
							let indSelect= selectedProp.indexOf(listName);
							if(indSelect !== -1){
								selectedProp=selectedProp.splice(indSelect,1);
								filterTemplateHeader[key]['selectedProp']=selectedProp;
							}					
						}
						filterTemplateHeader[key]['enableAnd'] = true;
						console.log('ERRROOR CONDITION HANDLING!!!!');
						this.templateErrorList[idx].pop();
						this.updateSavedQueryTemplate('add',key,templateKey,filterMap,filterTemplateHeader,idx);
					}else{
						console.log('Regular Scenario>>>>>');
						filterTemplateHeaderList[idx]=filterTemplateHeader;
						this.setState({filterTemplateHeaderList:filterTemplateHeaderList});
					}
				}
			})
		}
	});
  };
  /** */
  prepareDownloadRangeModel = () =>{
	let downloadExcelsFunc= this.getAllExcels;
	if(this.state.isAggregate){
		downloadExcelsFunc=this.downloadAllAggregate;
	}
    let downloadRangeModel = (this.state.showDownloadResultsModal)? <DownloadRangeModel 
              showDownloadResultsModal={this.state.showDownloadResultsModal}
              totalPages={this.state.totalPages}
              totalResults={this.state.totalResults}
              triggerDownload={downloadExcelsFunc}
              errorDownloadResults={this.state.errorDownloadResults}
              downloadErrorMsg={this.state.downloadErrorMsg}
              triggerClose={this.closeDownloadResults}
              enableModelBusyFeedback={this.state.enableModelBusyFeedback}
          /> : '';
    return downloadRangeModel;
  }
  toggleRealTimeAnalysisCallback=(checked)=>{
	console.log('toggleRealTimeAnalysisCallback>>>>',checked);
	sessionStorage.setItem(ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);	
	TABULAR_FILTER_TYPE=(APERTURE_SERVICE && !checked)?'CONTAINS':'=';
	this.baseState.enableRealTime=!checked;
	this.baseState.header='';	
	this.baseState.templateQuery='';
	this.baseState.filterTemplateEntries=[];
	this.baseState.filterTemplateHeader=[];
	this.baseState.filterTemplateError=false;
	this.baseState.nodeTypeOfDslTemplate=[];
	this.baseState.filterTemplateEntriesList=[];
	this.baseState.filterTemplateHeaderList=[];
	this.baseState.filterTemplateErrorList=[];
	this.baseState.nodeTypeOfDslTemplateList=[];
	this.baseState.templateQueryList=[];
	this.baseState.valueList=[];
	this.dslObject={};
	this.nodeTypeArray=[];
	this.dslObjectList=[];
	this.nodeTypeArrayList=[];
	this.edgesArray=[];
	this.relationsArray=[];
	this.tempDslQuery='';
	this.tempDslQueryList=[];
	this.templateError=[];
	this.templateErrorList={};
	this.setState({...this.baseState},()=>{this.buildDynamicByoq();});	
  }
  templateheaderSaveQuery = (id)=>{
	console.log('templateheaderSaveQuery>>>>>>>>>>>>>',id);
	let templateSavedQuery = '';
	let entityKeyAddition = 1;
	let templateheaderSaveQuery = '';
	let filterTemplateHeaderList = this.state.filterTemplateHeaderList;
	//templateheaderSaveQuery=Object.keys(this.state.filterTemplateEntriesList).map((id)=>{
		//let tempheaderSavedQuery=''
		if(this.state.filterTemplateEntriesList[id].length > 0 && !this.state.filterTemplateErrorList[id]){
				let filterTemplateEntries=this.state.filterTemplateEntriesList[id];
				let staticTemplateFilters = this.state.staticTemplateFiltersList[id];
				templateheaderSaveQuery= <div>
				{Object.keys(filterTemplateEntries).map((index) => {
					let filterTemplateEntry = filterTemplateEntries[index];
					return Object.keys(filterTemplateEntry).map((key) =>{
						let filterTemplateEntryKey=filterTemplateEntry[key];
						let columns =this.populateFilteredColumnOptions(key,id);//this.populateColumnOptions(key);
						return 	<table className='table table-hover table-striped savedQueryTemplate' style={{margin:'0px',padding:'2px'}} id={'table_'+key}>
									<thead>
										<tr>
											<th colSpan='2'>{key.toUpperCase()}</th>
											{this.state.enableRealTime && <th width='20%'></th>}
											<th width={(this.state.enableRealTime)?'30%':'25%'}></th>
											<th width={(this.state.enableRealTime)?'20%':'25%'}>
												<button id={key+'_addAND'} className='btn btn-secondary' disabled ={!filterTemplateHeaderList[id][key]['enableAnd']} type='button' onClick={e => {this.addAndTemplate(key,id)}}>Add Filter</button>
											</th>
										</tr>
									</thead>
									<tbody>
										{Object.keys(filterTemplateEntryKey).sort().map((entryKey, entry) => {
											entityKeyAddition = parseInt(entryKey) + 2;
											let valueArray = filterTemplateEntryKey[entryKey].value.split('^');
											console.log("Comparing Static Array: " + JSON.stringify(staticTemplateFilters) + " with " + key + "|" + filterTemplateHeaderList[id][key]['propName']);
											if(staticTemplateFilters.indexOf(key + "|" + filterTemplateEntryKey[entryKey].name) === -1 ){
											    return(
											    	<tr>
											    		<td width={(this.state.enableRealTime)?'10%':'25%'}>
											    			<label>{'$' + (filterTemplateEntryKey[entryKey].templateKey + 1)}</label>
											    		</td>
											    		<td width={(this.state.enableRealTime)?'20%':'25%'}>
											    			{filterTemplateEntryKey[entryKey].name !== '' && filterTemplateEntryKey[entryKey].name !== 'ERROR' && <label>{filterTemplateEntryKey[entryKey].name}</label>}
											    			{filterTemplateEntryKey[entryKey].name === '' && <SelectFilter param={this.state}
											    				filterList={columns}
											    				id={key+'#'+filterTemplateEntryKey[entryKey].templateKey+'#'+id}
											    				selectedFilter={filterTemplateHeaderList[id][key]['propName']}
											    				onMenuSelect={this.updatePropertyFilter}/>}
											    			{filterTemplateEntryKey[entryKey].name === 'ERROR' && <div className='inputBoxError'><SelectFilter param={this.state}
											    				filterList={columns}
											    				id={key+'#'+filterTemplateEntryKey[entryKey].templateKey+'#'+id}
											    				selectedFilter={this.state.filterDisplay}
											    				onMenuSelect={this.updatePropertyFilter}/></div>}
											    		</td>
											    		{this.filterTags(filterTemplateEntryKey[entryKey].type,filterTemplateEntryKey[entryKey].templateKey,key,id)}
											    		<td width={(this.state.enableRealTime)?'30%':'25%'}>
											    			{Object.keys(valueArray).map((indx) =>{
											    					return(
											    						<div style={{margin:'5px'}}>
											    							{valueArray[indx] === '' && <input id={key+'_'+indx} onBlur={e => this.updateTemplateFilterValues(key,filterTemplateEntryKey[entryKey].templateKey,e.target.value,e.target.id,id)}/>}
											    							{valueArray[indx] !== '' && <input id={key+'_'+valueArray[indx]+'_'+indx} value={valueArray[indx]} onChange={e => this.updateTemplateFilterValues(key,filterTemplateEntryKey[entryKey].templateKey,e.target.value,e.target.id,id)}/>}
											    							{indx == 0 && <button className={(filterTemplateEntryKey[entryKey].name !== '')?'btn btn-primary':'btn btn-secondary'} style={{padding:'2px',margin:'0px 0px 7px 5px'}} disabled={filterTemplateEntryKey[entryKey].name === ''} type='button' onClick={e => {this.addOrTemplate(key,filterTemplateEntryKey[entryKey].name,filterTemplateEntryKey[entryKey].templateKey,id)}}>+</button>}
											    							{indx>0 && <button style={{padding:'2px',margin:'0px 0px 7px 5px'}} id={'delete-'+indx} className='btn btn-danger' type='button' onClick={e => {this.deleteOrTemplate(key,filterTemplateEntryKey[entryKey].templateKey,e.target.id,id)}}>x</button> }
											    						</div>
											    					)
											    			})}
											    		</td>
											    		<td width={(this.state.enableRealTime)?'20%':'25%'}>
											    			{filterTemplateEntryKey[entryKey].addition &&<button id='deleteAnd' className='btn btn-secondary' type='button' onClick={e => {this.updateSavedQueryTemplate('delete',key,filterTemplateEntryKey[entryKey].templateKey,'','',id)}}>Delete</button>}
											    		</td>
											    	</tr>);
											}else {
											    return;
											}
										})}
									</tbody>
								</table>						
								})
						})}
						</div>
		}
		return templateheaderSaveQuery;
  };
  downloadBulkDslToExcel = () =>{
	console.log('downloadBulkDslToExcel>>>>>>>>>>>');		
	let path='bulk-dsl-to-excel';
	this.generatebulkDslToExcel(path,false)
  }
  generatebulkDslToExcel = (path,state) =>{
  	this.setState({isLoading: true});
	Object.keys(settings).forEach((key)=>{
		if(key==='ISAPERTURE' || key==='ISTABULAR'){
			delete settings[key];
		}
	})
	let mergedTabs=this.state.isMergedTabsChecked;
	var payload =  {'headers':{
		'X-DslApiVersion':'V2',
		'use-aperture': this.state.enableRealTime,
		'schema-version': INVLIST.VERSION,
		'merge-tabs':mergedTabs,
		'accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
		},'dsls': []};
		
	Object.keys(this.state.queryNameList).map((index)=>{
		if(!this.state.filterTemplateErrorList[index]){
			let query=this.formFinalTemplateQuery(index);		
			let obj={
				"query-id": parseInt(index)+1, 
				"query-name": this.state.queryNameList[index], 
				"query-description": this.state.queryDescriptionList[index], 
				"is-aggregate": this.state.isAggregateCheckedList[index], 
				"dsl": query
				};
			payload['dsls'].push(obj);
		}
	});
	var email='';	
	if(state){
		let userid = sessionStorage.getItem(ENVIRONMENT + 'userId');
		if(userid ==='testuid'){// For testing Purpose
			email='AAI-UI-DEV@list.att.com';
		}else{
			email=userid+EMAIL_EXT;
		}		
		payload['headers']['email'] = email;
	}
	console.dir('CustomDSL:payload:' + JSON.stringify(payload));
	commonApi(settings, path, 'POST', payload, '',GlobalExtConstants.OVERRIDE_DOMAIN, null, [{
																"name":"X-DslApiVersion",
																"value": "V2"},
																{
																"name":"use-aperture",
																"value": this.state.enableRealTime
																},
																{
																"name":"schema-version",
																"value":INVLIST.VERSION},
																{
																"name":"accept",
																"value":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
																},{
																"name":"encode-response",
																"value":true}
															])
	.then(res => {			
			let success =true;
			let failures=[];
			if(!state){
				if(res['headers']['failures']){
					failures=res['headers']['failures'].split(',');
					for (var i = 0; i < failures.length; i++) {
						var a = failures[i].split('|');
						a.splice(1, 1);
						failures[i] = a.join();
					}
					success=false;
				}else{
					let filename='';
					if(res['headers']['content-disposition']){
						filename=res['headers']['content-disposition'].split('=')[1];
					}else if(res['headers']['Content-Disposition']){
						filename=res['headers']['content-disposition'].split('=')[1];
					}
					const blob = new Blob([this.s2ab(atob(res.data))],
					{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'});
					const url = window.URL.createObjectURL(blob);
					const anchor = document.createElement('a');
					document.body.appendChild(anchor);
					anchor.href = url;
					anchor.download = filename;
					anchor.click();
					window.URL.revokeObjectURL(url);
				}
				this.setState({
					isLoading: false,
					downloadTemplateStatus:success,
					failedDownloadedTemplate:failures,
					failedDownloadedTemplateMsg:'',
					failedEmailTemplateMsg:'',
					emailTriggerMsg:''
				},()=>{GeneralCommonFunctions.scrollTo("downloadTemplateStatusAlert");});							
			}else{
				let emailTriggerMsg='';
				let failedEmailTriggerMsg='';
				success=false;
				failures=[];
				if(res.status === 202){
					emailTriggerMsg='The job has been successfully triggered. The results will be emailed to '+ email +' when finished.'
				}else{
					failedEmailTriggerMsg='Failed to Generate an Email for selected template queries';
				}
				this.setState({
					isLoading: false,
					downloadTemplateStatus:success,
					failedDownloadedTemplate:failures,
					failedDownloadedTemplateMsg:'',
					failedEmailTemplateMsg:failedEmailTriggerMsg,
					emailTriggerMsg:emailTriggerMsg
				},()=>{GeneralCommonFunctions.scrollTo("downloadTemplateStatusAlert");});
			}				
		}).catch(error => {
			console.log('Bulk download xls Catch the Error>>>>>',error.response);
			let ErrorMessage=(state)?'Failed to Generate an Email for selected template queries':'Failed to Download selected template queries';
			if (error.response && error.response.data) {
				if(error.response.data.status){
					ErrorMessage += " Code: " + error.response.data.status;
				}
				if(error.response.data.msg){
					ErrorMessage += " - " + JSON.stringify(error.response.data.msg);
			  }
			}
			if(state){
				this.setState({
					isLoading: false,
					downloadTemplateStatus:false,
					failedDownloadedTemplate:[],
					failedDownloadedTemplateMsg:'',
					failedEmailTemplateMsg:ErrorMessage
				},()=>{GeneralCommonFunctions.scrollTo("downloadTemplateStatusAlert");});
			}else{
				this.setState({
					isLoading: false,
					downloadTemplateStatus:false,
					failedDownloadedTemplate:[],
					failedDownloadedTemplateMsg:ErrorMessage,
					failedEmailTemplateMsg:'',
					emailTriggerMsg:''
				},()=>{GeneralCommonFunctions.scrollTo("downloadTemplateStatusAlert");});
			}
			
		});
  }
  s2ab=(s)=> {
	var buf = new ArrayBuffer(s.length);
	var view = new Uint8Array(buf);
	for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
	return buf;
  }
  templateList = () =>{
	var filterTypeHeader='';
	if(APERTURE_SERVICE){		
		filterTypeHeader =  (this.state.enableRealTime)?<th scope='col' width='20%'>Filter Type</th>:''; 
	}
	var listOfTemplate=[];
	Object.keys(this.state.filterTemplateEntriesList).map((idx)=>{
		let templateList =<div id={"template_"+idx} className="col-lg-10 templateview">
						{this.state.filterTemplateEntriesList[idx].length > 0 && !this.state.filterTemplateErrorList[idx] &&
					  		<div className='card d3-model-card model-card-content'>
							  <Alert id='saveSuccess' bsStyle='success' className={this.state.saveSuccessfulMsg && !this.state.isEditModal ? 'show' : 'hidden'} onDismiss={() => this.setState({saveSuccessfulMsg: false})}>
								  <h3>Query Saved Successfully</h3>
								  <p>
									  {this.state.saveSuccessfulMsg}
								  </p>
							</Alert>
							<div className='card-header'>
								<div>
									<h3><strong>{parseInt(idx)+1}.{this.state.queryNameList[idx]}</strong> - {this.state.queryDescriptionList[idx]}</h3>
								</div>
							</div>
							<div>
								<div className='card-header'>
									<h5>{this.state.templateQueryList[idx]}</h5>
								</div>
								<table className="table table-hover table-striped" style={{margin:'0px',padding:'2px'}}>
									<thead>
										<tr>
											<th scope="col" width={(this.state.enableRealTime)?'10%':'25%'}>Filter Key</th>
											<th scope="col" width={(this.state.enableRealTime)?'20':'25%'}>Filter Name</th>
											{filterTypeHeader}
											<th scope="col" width={(this.state.enableRealTime)?'30%':'25%'}>Filter Value</th>
											<th scope="col" width={(this.state.enableRealTime)?'20%':'25%'}> Action</th>
										</tr>
									</thead>
								</table>
							</div>
							<div className='card-content model-card-content' style={{margin:'0px'}}>									
								{this.templateheaderSaveQuery(idx)}                               
							 </div>
							<div className='card-footer'>
								<button id='runSavedQuery' className='btn btn-primary btn-space' type='button' onClick={e => {this.runTemplate(idx)}}>Run Query</button>
								<button id='manualEditQuery' className='btn btn-secondary btn-space' type='button' onClick={e =>{this.showEditDSLModal(idx)}} disabled={this.templateError.length>0}>Manual Edit & Run</button>
								<button id='saveQuery' className='btn btn-outline-secondary btn-space' type='button' onClick={e =>{this.saveTemplate(idx)}} disabled={this.templateError.length>0}>Save</button>
								<div className={'checkbox ' + (GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
									<label>
									<input type="checkbox" id='aggregateObjects' checked={this.state.isAggregateCheckedList[idx]} onChange={this.onAggregateCheckbox.bind(this)} />
									Aggregate Objects
									</label>
								</div>
							</div>
					 </div>
				}
				{this.state.queryNameList[idx] && this.state.filterTemplateEntriesList[idx].length === 0 && !this.state.filterTemplateErrorList[idx] &&
					<div className='addPaddingTop alert alert-warning' role="alert">
					  No filters present to populate for this saved query, please run as is or edit the query manually and run.
					</div>
				}
				{this.state.filterTemplateErrorList[idx] &&
				  <div className='addPaddingTop alert alert-danger' role="alert">
					An error occurred in parsing the template, please try a different template or contact the data steward to resolve this issue.
				  </div>
				}
		</div>;
		listOfTemplate.push(templateList);
	});	
	console.log('listOfTemplate>>>>>#####>>>>>>>',listOfTemplate);
	return listOfTemplate;
  }


  render(){
	let downloadRangeModel = this.prepareDownloadRangeModel();
	let templateList= this.templateList();
	var toggelRealtimeAnalysis = '';
	var emailCheckbox = <div className={(this.dslObjectList.length>0)?'show':'hidden'}>
							<div className="checkbox">
								<OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{'Report will be generated and emailed to '+sessionStorage.getItem(ENVIRONMENT + 'userId')+'@att.com when finished'}</Tooltip>}>
									<span className="d-inline-block" style={{display: 'inline-block'}}>
										<Button bsSize='small' disabled={(this.dslObjectList.length===0)} onClick={() => {this.onGenerateEmailButton()}}>
											Generate & Email <i className='icon-documents-folder'></i>
										</Button>
									</span>
								</OverlayTrigger>
							</div>
						</div>
	var mergedTabs = <div className={(this.dslObjectList.length>0)?'show':'hidden'}>
						<div className="checkbox">
							<label>
								<input type="checkbox" checked={this.state.isMergedTabsChecked} onChange={this.onMergedTabsCheckbox.bind(this)} />
								Merge Tabs
							</label>
						</div>
					 </div>
	var downloadAllTemplateQueries = <div className={(this.dslObjectList.length>0)?'show':'hidden'}>
										<OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadBulkTooltip}</Tooltip>}>
											<span className="d-inline-block" style={{display: 'inline-block'}}>
												<Button bsSize='small' disabled={(this.dslObjectList.length===0)} onClick={() => {this.downloadBulkDslToExcel()}}>
													Download Loaded Queries <i className='icon-documents-downloadablefile'></i>
												</Button>
											</span>
										</OverlayTrigger>										
								 	</div>
	let downloadTemplateStatusAlert= <div className={(this.dslObjectList.length>0)?'show':'hidden'}>
										<Alert id="saveSuccess" bsStyle="success" className={(this.state.downloadTemplateStatus && this.state.failedDownloadedTemplate.length===0)?'show':'hide'} onDismiss={() => this.setState({
												downloadTemplateStatus:false,
												failedDownloadedTemplate:[],
												failedDownloadedTemplateMsg:'',
												failedEmailTemplateMsg:'',
												emailTriggerMsg:''})}>
											<h3>Download Loaded Templates are  Successfully</h3>
											<p>
												The selected templates downloaded successfull.
											</p>
										</Alert>
										{this.state.failedDownloadedTemplate.length>0 && <Alert id="saveFailure" bsStyle="danger"  onDismiss={() => this.setState({
												downloadTemplateStatus:false,
												failedDownloadedTemplate:[],
												failedDownloadedTemplateMsg:'',
												failedEmailTemplateMsg:'',
												emailTriggerMsg:''})}>
											<h3>Download Loaded Templates are Failed</h3>
											<p>											
												{this.state.failedDownloadedTemplate.toString()} templates are failed to download.Please refer the downloaded spreadsheet for more details.
											</p>
										</Alert>}
										{this.state.failedDownloadedTemplateMsg !=='' && <Alert id="saveFailure" bsStyle="danger" onDismiss={() => this.setState({
												downloadTemplateStatus:false,
												failedDownloadedTemplate:[],
												failedDownloadedTemplateMsg:'',
												failedEmailTemplateMsg:'',
												emailTriggerMsg:''})}>
											<h3>Download Loaded Templates are Failed</h3>
											<p>											
												{this.state.failedDownloadedTemplateMsg}
											</p>
										</Alert>}
										{this.state.emailTriggerMsg !=='' && <Alert id="saveSuccess" bsStyle="success" onDismiss={() => this.setState({failedEmailTemplateMsg:'',emailTriggerMsg:''})}>
											<h3>Generate & Email Triggered</h3>
											<p>											
												{this.state.emailTriggerMsg}
											</p>
										</Alert>}
										{this.state.failedEmailTemplateMsg !=='' && <Alert id="saveFailure" bsStyle="danger" onDismiss={() => this.setState({failedEmailTemplateMsg:'',emailTriggerMsg:''})}>
											<h3>Generate & Email Templates is Failed</h3>
											<p>											
												{this.state.failedEmailTemplateMsg}
											</p>
										</Alert>}										
									</div>
	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>             
	}
		const inputProps = {
			placeholder: 'Please enter a query',
			value: this.state.value,
			onChange: this.onChange,
			onSelect: this.onSelect,
			onClick: this.onClick
		};

		let nodes = [];
		if ( this.state.isAggregate && this.state.aggregateNodes.length > 0 ) {

			console.log('nodes exist', JSON.stringify(this.state.aggregateNodes[0]));
            if(this.state.isAggregate && this.state.viewName === 'CardLayout'){
                var nodeDetails = this.state.aggregateNodes.map(entry => {
                                                           return <Col lg={4} md={4} sm={6} xs={12}>
                                                                   <div className='card aggregate-card'>
                                                                        <div className='card-header'>
                                                                          <h4 className='card-title'>{entry.nodePath}</h4>
                                                                        </div>
                                                                        <div className='card-content aggregate-card-content'>
                                                                        <span>
                                                                    {entry && typeof entry.map === 'function' && entry.map(subEntry =>
                                                                         {  let nodesPropList={};
																			return Object.keys(subEntry).map((node) => {
																						 console.log("subentry : " + JSON.stringify(node + ' ' + JSON.stringify(subEntry[node])));
																						 let description='';
																						 let nodeType=subEntry[node]['node-type'];
																						 if(!nodesPropList[nodeType]){																							
																							var requiredParams = buildAttrList(nodeType,[],'mandatory');
																							nodesPropList[nodeType]=requiredParams;
																						 }
                                                                                         return (<span>
                                                                                                     {this.state.associatedNodesEnabled && (<Alert bsStyle="info"><strong>{node}</strong></Alert>)}
                                                                                                     {Object.keys(subEntry[node].properties).map((key)=>{
																										 let propKey=key.split('|')[1];
																										 let found=true;
																										 for(var a in nodesPropList[nodeType]){
																											if(propKey===nodesPropList[nodeType][a].value){
																												found=false;
																												return (<p className="aggregate-attribute"><strong title={nodesPropList[nodeType][a].description}>{key}</strong> : {"" + subEntry[node].properties[key]}</p>);
																											}
																										 }
																										 if(found){
																											return (<p className="aggregate-attribute"><strong>{key}</strong> : {"" + subEntry[node].properties[key]}</p>);
																										 }                                                                                                        
                                                                                                     })
                                                                                                     }
                                                                                                 </span>)
                                                                                     })
                                                                         })
                                                                     }

                                                                          {this.state.associatedNodesEnabled && (<Alert bsStyle="info"><strong>{entry.fullPath}</strong></Alert>)}
                                                                        </span>
                                                                        </div>
                                                                    </div>
                                                                   </Col>;
                                                   });
                nodes =
                <div className='model-container'>
                	{nodeDetails}
                </div>;
            }else if(this.state.isAggregate && this.state.viewName === 'CellLayout'){
               if(this.state.aggregateAttrList.length > 0 && this.state.aggregatePaths){
                   var types = this.state.aggregatePaths;
                   var type = types[0];
                   let tabs=types.map((nodeType,index) => {
			   if(this.state.tabularAggregateData[nodeType] && this.state.tabularAggregateColumns[nodeType]){
	                     return(
	                       <Tab eventKey={nodeType} title={nodeType}>
	                         <BootstrapTable
	                             id={nodeType}
	                             keyField='id'
	                             data={this.state.tabularAggregateData[nodeType]}
	                             columns={this.state.tabularAggregateColumns[nodeType]}
	                             bordered={ true }
	                             headerClasses='table-header-view'
	                             columnFilter={ true }
	                             filter={ filterFactory() }
	                             bootstrap4 striped hover condensed
	                         />
	                       </Tab>
	                     )
			   }
	           });

		    nodes =
		    	 <div>
				<button type='button' className={(this.state.disableFilter)? 'btn btn-outline-secondary' : 'btn btn-primary'} disabled={this.state.disableFilter} onClick={() => {this.isTableFilterForAggregation(this.state.columnFilter,this.state.tabularAggregateColumns[type])}} style={{float: 'right', margin: '2px'}}>Apply Filters (All)</button>
                         	<Tabs defaultActiveKey={type} id="multipleTabularView">
                          		{tabs}
                        	</Tabs>
			 </div>;
                }
            }else if(this.state.isAggregate && this.state.viewName === 'VisualLayout'){
                     nodes = <span></span>;
            }
		}else if (this.state.nodes.length > 0){
		    const modelGalleryElement = <ModelGallery
            								nodes={this.state.nodes}
            								viewName={this.state.viewName}
            								historyStackString={this.props.location.historyStackString}
            								openHistoryModal={this.openHistory}
            								isPageNumberChange={this.state.isPageNumberChange}
            								resetColumnInd={this.state.resetColumnFilters}
									isTableFilterApply={this.isTableFilterApply}
									dslQuery={this.state.value}
									enableRealTime={this.state.enableRealTime}
									tableFilterAliasColumns={this.tableFilterAliasColumns}/>;
            nodes =
            <div className='model-container'>
            	{modelGalleryElement}
            </div>;
		}				
	return(
		<div>
			{toggelRealtimeAnalysis}
			<div className='addPadding customDsl'>
		    <div className='static-modal'>
					<Modal show={this.state.showHistoryModal} onHide={this.closeHistory}>
						<Modal.Header>
							<Modal.Title>Retrieve {(this.state.focusedNodeType) ? this.state.focusedNodeType: ' BYOQ Query '} History</Modal.Title>
						</Modal.Header>
						<Modal.Body>
							<form className={this.state.showModelOptions ? 'show' : 'hidden'} id='historyForm' name='historyForm'>
								<div className="radio">
									<label>
									<input type="radio" value="nodeState"
													checked={this.state.historyType === 'nodeState'}
													onChange={(e) => this.setHistoryType(e)} />
									View state at
									</label>
								</div>
								<div className="radio">
									<label>
									<input type="radio"  value="nodeLifeCycleSince"
													checked={this.state.historyType === 'nodeLifeCycleSince'}
													onChange={(e) => this.setHistoryType(e)} />
									View updates since
									</label>
								</div>
								<div className="radio">
									<label>
									<input type="radio" value="nodeLifeCycle"
													checked={this.state.historyType === 'nodeLifeCycle'}
													onChange={(e) => this.setHistoryType(e)} />
									View all updates
									</label>
								</div>
							</form>
							<div className={this.state.enableCalendar ? 'show' : 'hidden'}>
									<DatePicker
											inline
													selected={this.state.startDate}
													onChange={(newDate) => this.handleDateChange(newDate)}
													showTimeSelect
													timeFormat="HH:mm"
													timeIntervals={15}
													dateFormat="MMMM D, YYYY h:mm a"
													timeCaption="time"
											/>
									</div>
						</Modal.Body>
						<Modal.Footer>
							<Button onClick={this.closeHistory}>Close</Button>
							<Button onClick={this.submitHistory}>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 id='dslQueryEditable' name='dslQueryEditable'>
                        <FormGroup controlId="dslQuery">
                              <ControlLabel>DSL Query</ControlLabel>
                              <FormControl className="template-textarea" 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 className='static-modal'>
                  		<Modal show={this.state.showNodeModal} onHide={this.closeNodeModal} dialogClassName="modal-override">
                  			<Modal.Header>
                  				<Modal.Title>Retrieve {this.state.nodeDisplay}</Modal.Title>
                  			</Modal.Header>
                  			<Modal.Body>
                                <Grid fluid={true}>
                                      <Row className='show-grid'>
                                        <Col lg={12} md={12} sm={12} xs={12}>
                                            <ModelCard
                                                        key={this.state.focusedNode.id}
                                                        nodeId={this.state.focusedNode.id}
                                                        nodeType={this.state.focusedNode['node-type']}
                                                        nodeProps={this.state.focusedNode.properties}
                                                        nodeRelatives={this.state.focusedNode['related-to']}
                                                        nodeUrl={this.state.focusedNode.url}
                                                        historyStackString={this.props.location.historyStackString}
                                                        openHistoryModal={this.openHistory}
														enableRealTime={this.state.enableRealTime}/>
                                        </Col>
                                      </Row>
                                </Grid>
                  			</Modal.Body>
                  			<Modal.Footer>
                  				<Button onClick={this.closeNodeModal}>Close</Button>
                  			</Modal.Footer>
                  		</Modal>
        </div>
        <div className='static-modal'>
                  		<Modal show={this.state.showSaveModal} onHide={this.closeSaveModal} dialogClassName="modal-override">
                  		    <Spinner loading={this.state.enableSaveBusyFeedback}>
                  			    <Modal.Header>
                  			    	<Modal.Title>{this.state.isEditModal ? 'Edit' : 'Save'} DSL Query</Modal.Title>
                  			    </Modal.Header>
                  			    <Modal.Body>
                  			         <Alert id="saveFailure" bsStyle="danger" className={this.state.saveFailureMsg ? 'show' : 'hidden'} onDismiss={() => this.setState({saveFailureMsg: false})}>
                                         <h3>Query Save Failed</h3>
                                         <p>
                                           {this.state.saveFailureMsg}
                                         </p>
                                     </Alert>
                                    <form className={!this.state.showQueryExistsWarning ? 'show' : 'hidden'} id='saveDslQueryForm' name='saveDslQueryForm'>
                                      <FormGroup controlId="queryName">
                                           <ControlLabel>Query Name</ControlLabel>
										  {!this.state.isEditModal && (<input id='dslNameHelp' type='name' className='form-control' id='queryName' aria-describedby='dslNameHelp' placeholder='Enter query name' value={this.state.queryName} onChange={this.handleQueryNameChange}/>)}
										  {!this.state.isEditModal && (<small id='queryNameHelp' className='form-text text-muted'>Select a name for your saved query, do not reuse names.</small>)}
										  {this.state.isEditModal && (<p>{this.state.queryName}</p>)}
                                      </FormGroup>
                                      <FormGroup controlId="queryDescription">
                                           <ControlLabel>Query Description</ControlLabel>
                                           <FormControl componentClass="textarea" id="queryDescription" aria-describedby="queryDescriptionHelp" placeholder="Enter query description" value={this.state.queryDescription} onChange={this.handleQueryDescriptionChange} />
                                           <small id="queryDescriptionHelp" className="form-text text-muted">Be as descriptive as possible to describe the purpose of the saved query (this will be searchable)</small>
                                      </FormGroup>
				      <FormGroup controlId="category">
                                           <ControlLabel>Category</ControlLabel>
                                           <input id='category' type="name" className="form-control"  aria-describedby="category of SavedQuery" placeholder="Enter category" value={this.state.category} onChange={this.handleCategoryChange}/>
                                      </FormGroup>
                                      <FormGroup controlId="privacy_indicator">
                                        {this.state.isDataSteward && (<div className="checkbox">
                                           <label>
                                             <input type="checkbox" checked={this.state.isPublicChecked} onChange={this.onPublicCheckbox.bind(this)} />
                                             Public
                                           </label>
                                        </div>)}
                                        <div className={"checkbox " + ((!this.state.isPublicChecked || !this.state.isDataSteward) ? 'show' : 'hidden')}>
                                           <label>
                                             <input type="checkbox" checked={this.state.isCommunitySharedChecked} onChange={this.onCommunitySharedCheckbox.bind(this)} />
                                             Share with Community
                                           </label>
                                        </div>
                                        {!this.state.isDataSteward && (<ControlLabel>Personal Query</ControlLabel>)}
                                      </FormGroup>
                                      <FormGroup controlId='aggregate'>
										  {this.state.isAggregateChecked && !(this.state.isEditModal || this.state.isSavedQueryFlow) && (<ControlLabel>Aggregate Query</ControlLabel>)}
										  {!this.state.isAggregateChecked && !(this.state.isEditModal || this.state.isSavedQueryFlow) && (<ControlLabel>Standard Query</ControlLabel>)}
										  {(this.state.isEditModal || this.state.isSavedQueryFlow) && (<div className='checkbox'>
											  <label>
												  <input type='checkbox' checked={this.state.isAggregateChecked} onChange={this.onAggregateCheckbox.bind(this)}/>
												  Aggregate Query
											  </label>
										  </div>)}
									  </FormGroup>
                                      <FormGroup controlId='queryDSL'>
                                           <ControlLabel>DSL Query</ControlLabel>
										  {!this.state.isEditModal && !this.state.isSavedQueryFlow ? <p>{this.state.value}</p> : <FormControl componentClass='textarea' id='queryDSL' aria-describedby='queryDSLHelp' placeholder='Enter dsl query' value={this.state.value} onChange={this.handleQueryChange} />}
									  </FormGroup>
									  <FormGroup controlId='templateDetails'>
									    <Spinner loading={this.state.enableTreeLoadBusyFeedback}>
									       <div className={!this.state.treeLoadErrMsg ? 'show' : 'hidden'}>
                                                <ControlLabel>Configuration Template Details - check for configurable, uncheck for static</ControlLabel>
                                                {Object.keys(this.state.dslConfigArray).map(key => {
                                                     return (this.state.dslConfigArray[key].filters).map(filter =>{
                                                         return (<div className='checkbox'>
                                                                 	  <label>
                                                                 		  <input type='checkbox' checked={this.state.staticTemplateFilters.indexOf(key + '|' + filter) === -1} onChange={(e) => {this.onDslConfigCheckbox(e, key + '|' + filter)}} />
                                                                 		  {key} - {filter}
                                                                 	  </label>
                                                                 </div>)
                                                     })
                                                  })
                                                }
                                           </div>
                                           <Alert bsStyle="danger" className={this.state.treeLoadErrMsg ? 'show' : 'hidden'}>
                                                <h3>Error Loading Configurable Filters</h3>
                                                <p>
                                                  {this.state.treeLoadErrMsg}
                                                </p>
                                            </Alert>
                                        </Spinner>
                                      </FormGroup>
                                    </form>
                                    <Alert bsStyle="warning" className={this.state.showQueryExistsWarning ? 'show' : 'hidden'} onDismiss={() => this.setState({showQueryExistsWarning: false})}>
                                        <h3>Query Name Already Exists</h3>
                                        <p>
                                          There is already a query with the name {this.state.queryName}, do you wish to overwrite the existing query?
                                        </p>
                                    </Alert>
                  			    </Modal.Body>
                  			    <Modal.Footer className={!this.state.showQueryExistsWarning ? 'show' : 'hidden'}>
                                	<Button onClick={this.closeSaveModal}>Close</Button>
                                	<Button disabled={this.state.queryName.trim() === '' || this.state.queryDescription.trim() === ''} onClick={() => {this.submitSave()}}>Save</Button>
                                </Modal.Footer>
                                <Modal.Footer className={this.state.showQueryExistsWarning ? 'show' : 'hidden'}>
                                	<Button onClick={() => this.setState({showQueryExistsWarning : false})}>No</Button>
                                	<Button onClick={() => {this.submitSave(true)}}>Yes</Button>
                                </Modal.Footer>
                            </Spinner>
                  		</Modal>
        </div>
			<div id="jumbotron" className='row'>
				<div className={'row container-fluid my-4 '  + (this.state.isDSLFlow ? 'show' : 'hidden')}>
					<div className='col-lg-12'>
						<header className='jumbotron'>
                                    <h1 className='display-2'><strong>B</strong>uild <strong>Y</strong>our <strong>O</strong>wn <strong>Q</strong>uery</h1>
                                    <p className='lead'>
                                      On this page you have the ability to craft your own query to retrieve objects from the database.
                                      There are help menus in the accordions and a modal triggered from the light bulb icon to help with syntax.
                                      There are is also a typeahead feature that will help you build your query as you type, providing valid nodes and attributes to use.
                                    </p>
                        </header>
					</div>
				</div>
				<div className={'row container-fluid my-4 '  + (this.state.isSavedQueryFlow ? 'show' : 'hidden')}>
                    <div className='col-lg-12'>
                    	<header className='jumbotron'>
                                    <h1 className='display-2'>Saved Queries</h1>
                                    <p className='lead'>
                                      On this page you have the ability to load and run previously saved queries.
                                      You can run them as they are saved or choose to load them to replace the filters
                                      in the template.
                                    </p>
                        </header>
                    </div>
				</div>
		    </div>
		    <div className='row'>
			    <div className={'addPadding col-md-12 ' + (this.state.isSavedQueryFlow ? 'show' : 'hidden')}>
					<div className='row'>
						<div className='col-lg-10'>
							<Alert id="saveSuccessEdit" bsStyle="success" className={this.state.saveSuccessfulMsg && this.state.isEditModal ? 'show' : 'hidden'} onDismiss={() => this.setState({saveSuccessfulMsg: false})}>
								<h3>Query Saved Successfully</h3>
								<p>
									{this.state.saveSuccessfulMsg}
								</p>
							</Alert>
						</div>
					</div>
			        <CustomDSLSaveLoad loadCallback={this.loadCallback} loadBulkCallback={this.loadBulkCallback} setQueriesState={this.setQueriesState} ref={this.saveLoadComponent} isDataSteward={this.state.isDataSteward} isSavedQueryFlow={this.state.isSavedQueryFlow} editCallback={this.editCallback}/>
				<div className={'col-xs-1 ' + (GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )} >
					<a href={INVLIST.USERGUIDE_URL} target="_blank">
						<i className="dsl-hint icon-documents-manual"></i>
					</a>
					<pre>User<br />Guide</pre>
				</div>
				<div className='col-lg-11'><InfoToggle/></div>
			</div>
			<div className='row'>
				<div className='col-md-12' id='templateList'>
					{templateList}
				</div>
				<div className='col-md-10'  id='downloadTemplateStatusAlert'>
					<div className='col-md-6'>
						{downloadTemplateStatusAlert}
					</div>
					<div className='col-md-6'>
						<div style={{float:'right'}}>
							{emailCheckbox}
						</div>
						<div style={{float:'right',margin: '10px'}}>
							{downloadAllTemplateQueries}
						</div>
						<div style={{float:'right',margin: '10px'}}>
							{mergedTabs}
						</div>											
					</div>
				</div>				
				</div>			        
				<div className={'addPadding col-md-9 ' + (this.state.isDSLFlow ? 'show' : 'hidden')}>
					<form onSubmit={this.onAddItem} id='byoqFormForQuery' name='byoqFormForQuery'>
					<div className='row'>
						<div className='col-lg-9 form-group'>
						    <Alert id="saveSuccess" bsStyle="success" className={this.state.saveSuccessfulMsg ? 'show' : 'hidden'} onDismiss={() => this.setState({saveSuccessfulMsg: false})}>
			                                <h3>Query Saved Successfully</h3>
			                                <p>
			                                  {this.state.saveSuccessfulMsg}
			                                </p>
			                            </Alert>
							<div id="byoqInput"><label htmlFor='newQuery'>Build Your Own Query</label></div>
							<div className={this.state.isTypeahead ? 'show' : 'hidden'}>
								<Autosuggest
								suggestions={this.state.suggestions}
								onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
								onSuggestionsClearRequested={this.onSuggestionsClearRequested}
								getSuggestionValue={this.getSuggestionValue}
								renderSuggestion={this.renderSuggestion}
								inputProps={inputProps}
								shouldRenderSuggestions={this.shouldRenderSuggestions}
								onSuggestionSelected={this.onSuggestionSelected}
								ref={this.storeInputReference}
								/>
							</div>
							<div className={this.state.isTypeahead ? 'hidden' : 'show'}>
								<FormControl componentClass="textarea"
								rows="4"
								onChange={this.onTextAreaChange}
								style={{width: '655px'}}
								value={this.state.value}
								/>
							</div>
						</div>
					<div className={'col-xs-1 ' + (GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
						<a href={INVLIST.USERGUIDE_URL} target="_blank">
							<i className="dsl-hint icon-documents-manual"></i>
						</a>
						<pre>User<br />Guide</pre>
					</div>
						<InfoToggle/>
						<div className='col-xs-1'>
							<i className='dsl-hint fa fa-question-circle-o' onClick={this.hint} ></i>
						</div>
						<div className='static-modal'>
							<Modal show={this.state.showModal} onHide={this.close}>
								<Modal.Header>
									<Modal.Title>DSL Syntax</Modal.Title>
								</Modal.Header>
								<Modal.Body>
									{
										this.state.hintHtml.map(hints => {
										return <div key={hints.notation}>
										<label>{hints.notation}</label> =>
										<pre style={{color: 'blue'}}>  {hints.description}</pre>
										</div>;
										})
									}
								</Modal.Body>
								<Modal.Footer>
									<Button onClick={this.close}>Close</Button>
								</Modal.Footer>
							</Modal>
						</div>						
					</div>
					<div className='row'>
						<div className='col-sm-10'>
							<button id='runByoqQuery' className='btn btn-primary' type='submit'>Run</button>
							{ !INVLIST.IS_ONAP &&(<button id='saveByoqQuery' className='btn btn-outline-secondary'  type='button' disabled={this.state.value.trim() === ''} onClick={this.openSaveModal}>Save</button>)}
							{ INVLIST.isHistoryEnabled && (<button id='historyByoqQuery' className='btn btn-outline-secondary' type='button' disabled={this.state.value.trim() === ''} onClick={this.openHistory}>History</button>)}
							<button id='clearByoqQuery' className='btn btn-outline-secondary' type='button' onClick={this.clear}>Clear</button>
							<Toggle
								id="typeAheadToggle"
								defaultChecked={this.state.isTypeahead}
								checked={this.state.isTypeahead}
								className='toggle-theme'
								onChange={this.handleTypeaheadChange} />
							<span className='addPaddingLeft'>Typeahead</span>
            			</div>
					</div>
				</form>
				<div className={this.state.isInitialLoad ? 'hidden' : 'show'} id='dslInputError'>
					<Row className={this.state.validInput ? 'hidden' : 'show show-grid'}>
					  <Col md={12}>
						<span className='label badge-pill label-danger'><strong>Error </strong>: Please enter a valid query input</span>
					  </Col>
					</Row>
				</div>
				<div className={'checkbox ' + (GlobalExtConstants.INVLIST.IS_ONAP ? 'hidden' : '' )}>
                   <label>
                     <input type="checkbox" id='aggregateObjectsChkbox' checked={this.state.isAggregateChecked} onChange={this.onAggregateCheckbox.bind(this)} />
                     Aggregate Objects
                   </label>
                   {this.state.isAggregateChecked && (<label>
                     <input id='includeAssociatedNodes' type="checkbox" checked={this.state.associatedNodesEnabled} onChange={this.onAssociatedNodesCheckbox.bind(this)} />
                     Include Associated Nodes
                   </label>)}
                </div>
			    <CustomDSLSaveLoad loadCallback={this.loadCallback} loadBulkCallback={this.loadBulkCallback} setQueriesState={this.setQueriesState} ref={this.saveLoadComponentDsl} isDataSteward={this.state.isDataSteward} editCallback={this.editCallback}/>
			</div>
			<div className={'col-lg-2 col-md-12 ' + (this.state.isDSLFlow ? 'show' : 'hidden')}>
            	<PanelGroup accordion id='rb-accordion'>
            		<Panel eventKey='1'>
            		<Panel.Heading>
            			<Panel.Title toggle>+ Simple Queries</Panel.Title>
            		</Panel.Heading>
            		<Panel.Body collapsible>
						<div className='cardwrap'>
							<div className='cardWrapHeaderTxt'>
								<label>{this.state.simpleQueries.abstract}</label>
							</div>
							<div>
							{this.state.simpleQueries.notation.map(entry => {
								return (
									<div key={entry.notation}>
									<b><label>{entry.notation}</label></b> =>
									<span style={{color: 'blue'}}> {entry.description}</span>
								</div>
								);
							})}
							</div>
						</div>
            		</Panel.Body>
            		</Panel>
            		<Panel eventKey='2'>
            			<Panel.Heading>
            				<Panel.Title toggle>+ Traversal Queries</Panel.Title>
            			</Panel.Heading>
            			<Panel.Body collapsible>
							<div className='cardwrap'>
								<div className='cardWrapHeaderTxt'>
									<label>{this.state.traversalQueries.abstract}</label>
								</div>
								<div>
									{this.state.traversalQueries.notation.map(entry => {
									return (
										<div key={entry.notation}>
											<b><label>{entry.notation}</label></b> =>
											<span style={{color: 'blue'}}> {entry.description}</span>
										</div>
									);
									})}
								</div>
							</div>
            			</Panel.Body>
            		</Panel>
            		<Panel eventKey='3'>
            			<Panel.Heading>
            				<Panel.Title toggle>+ Union Queries</Panel.Title>
            			</Panel.Heading>
            			<Panel.Body collapsible>
							<div className='cardwrap'>
								<div className='cardWrapHeaderTxt'>
									<label>{this.state.unionQueries.abstract}</label>
								</div>
								<div>
									{this.state.unionQueries.notation.map(entry => {
									return (
										<div key={entry.notation}>
											<b><label>{entry.notation}</label></b> =>
											<span style={{color: 'blue'}}> {entry.description}</span>
									</div>
									);
									})}
								</div>
							</div>
            			</Panel.Body>
            		</Panel>
            		<Panel eventKey='4'>
            			<Panel.Heading>
            				<Panel.Title toggle>+ Limit Queries</Panel.Title>
            			</Panel.Heading>
            			<Panel.Body collapsible>
							<div className='cardwrap'>
								<div className='cardWrapHeaderTxt'>
									<label>{this.state.limitQueries.abstract}</label>
								</div>
								<div>
									{this.state.limitQueries.notation.map(entry => {
									return (
										<div key={entry.notation}>
											<b><label>{entry.notation}</label></b> =>
											<span style={{color: 'blue'}}> {entry.description}</span>
									</div>
									);
									})}
								</div>
							</div>
            			</Panel.Body>
            		</Panel>
            		<Panel eventKey='5'>
            			<Panel.Heading>
            				<Panel.Title toggle>+ Negation Queries</Panel.Title>
            			</Panel.Heading>
            			<Panel.Body collapsible>
							<div className='cardwrap'>
								<div className='cardWrapHeaderTxt'>
									<label>{this.state.negationQueries.abstract}</label>
								</div>
								<div>
									{this.state.negationQueries.notation.map(entry => {
									return (
										<div key={entry.notation}>
											<b><label>{entry.notation}</label></b> =>
											<span style={{color: 'blue'}}> {entry.description}</span>
										</div>
									);
									})}
								</div>
							</div>
            			</Panel.Body>
            		</Panel>
            		<Panel eventKey='6'>
            			<Panel.Heading>
            				<Panel.Title toggle>+ Topology Queries</Panel.Title>
            			</Panel.Heading>
            			<Panel.Body collapsible>
							<div className='cardwrap'>
								<div className='cardWrapHeaderTxt'>
									<label>{this.state.topologyQueries.abstract}</label>
								</div>
								<div>
									{this.state.topologyQueries.notation.map(entry => {
									return (
										<div key={entry.notation}>
											<b><label>{entry.notation}</label></b> =>
											<span style={{color: 'blue'}}> {entry.description}</span>
										</div>
									);
									})}
								</div>
							</div>
            			</Panel.Body>
            		</Panel>
                <Panel eventKey='7' className={(this.state.enableRealTime) ? 'show' : 'hidden'}>
                  <Panel.Heading>
                    <Panel.Title toggle>+ Advanced Queries</Panel.Title>
                  </Panel.Heading>
                  <Panel.Body collapsible>
                    <div className='cardwrap'>
                      <div className='cardWrapHeaderTxt'>
                        <label>{this.state.advancedQueries.abstract}</label>
                      </div>
                      <div>
                        {this.state.advancedQueries.notation.map(entry => {
                          return (
                            <div key={entry.notation}>
                              <b><label>{entry.notation}</label></b> =>
                              <span style={{color: 'blue'}}> {entry.description}</span>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </Panel.Body>
                </Panel>
            	</PanelGroup>
            </div>
            </div>
            <div className='row'>
			<div className='multipleNodes' id="outputBlock">
			<Spinner loading={this.state.isLoading && this.state.isInitialLoad}>
			</Spinner>
				<div className={this.state.isInitialLoad ? 'hidden' : 'show'}>
					<Spinner loading={this.state.isLoading} fullscreen={true}>
						<div className={this.state.validInput ? 'show' : 'hidden'}>
					    <Col md={12}>
						    <h2 className='pre-wrap-text'>{this.state.header}</h2>
						    <br/>
						    <h5>Total Results: <strong>{this.state.totalResults}</strong></h5>
						</Col>
						{this.state.showResults && <div className="addPaddingTop" >
						    <OutputToggle scope={this} visualDisabled={this.state.totalResults > PAGINATION_CONSTANT}/>
						</div> }
						{!this.state.isAggregate && (<div id="standardOutput" className="col-md-12">
						    <Row className={this.state.showResults ? 'show' : 'hidden'}>
						    	<Col md={8} className={this.state.showPagination ? 'show' : 'hidden'}>
						    		<Pagination
						    			activePage={this.state.activePage}
						    			itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
						    			totalItemsCount={this.state.totalResults}
						    			pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
						    			onChange={this.handlePageChange} />
						    	</Col>
						    	<Col md={2} className='text-right'>
						    		<OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadAllTooltip}</Tooltip>}>
                 		    	 		<span className="d-inline-block" style={{display: 'inline-block'}}>
						    				<Button bsSize='small' onClick={() => {this.getAllExcels(this.state.downloadCount)}}>
						    					Download XLSX <i className='icon-documents-downloadablefile'></i>
						    		</Button>
						    			</span>
						    		</OverlayTrigger>
						    	</Col>
						    	<Col md={2} className='text-right'>
						    	    <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadRangeTooltip}</Tooltip>}>
                  		    	    	<span className="d-inline-block" style={{display: 'inline-block'}}>
						    	    			<Button bsSize='small' onClick={this.openDownloadRange}>
						    	    			Download XLSX (Range) <i className='icon-documents-downloadablefile'></i>
						    	    		</Button>
						    	    	</span>
						    	    </OverlayTrigger>
						    	</Col>
						    </Row>
						    <hr/>
						    <div className={'addPaddingTop alert alert-danger ' +(this.state.errorResults ? 'show' : 'hidden')} role="alert">
                              An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage}
                            </div>
						    <Row className={this.state.noResults ? 'show' : 'hidden'}>
						    	<Col md={12}>
						    		<h2>No Results Found</h2>
						    	</Col>
						    </Row>
						    <div className={this.state.errorResults || this.state.noResults ? 'hidden' : 'show'}>
						    	<div className='nodes container-fluid'>
						    		<div className='row-dsl'>
						    			{nodes}
						    		</div>
						    	</div>
						    </div>
						    <Row className={this.state.showPagination ? 'show' : 'hidden'}>
						    	<Col md={6}>
						    		<Pagination
						    			activePage={this.state.activePage}
						    			itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
						    			totalItemsCount={this.state.totalResults}
						    			pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
						    			onChange={this.handlePageChange} />
						    	</Col>
						    </Row>
						</div>)}
						{this.state.isAggregate && (<div id="aggregateOutput">
                            		<Row className={ this.state.errorResults || this.state.noResults ? 'hidden' : 'show'}>
								<Col md={8} className={this.state.showPagination ? 'show' : 'hidden'}>
						    		<Pagination
						    			activePage={this.state.aggregateActivePage}
						    			itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
						    			totalItemsCount={this.state.totalResults}
						    			pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
						    			onChange={this.handlePageChange} />
						    	</Col>
								<Col md={2} className='text-right'>
						    		<OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadAllTooltip}</Tooltip>}>
                 		    	 		<span className="d-inline-block" style={{display: 'inline-block'}}>
						    				<Button bsSize='small' onClick={() => {this.downloadAllAggregate(this.state.downloadCount)}}>
						    					Download XLSX <i className='icon-documents-downloadablefile'></i>
						    				</Button>
						    			</span>
						    		</OverlayTrigger>
						    	</Col>
								<Col md={2} className='pull-right text-right'>
                            	    <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>Download All Aggregate Objects By Custom Range Selection</Tooltip>}>
                            	    	<span className="d-inline-block" style={{display: 'inline-block'}}>
                            	    			<Button bsSize='small' onClick={this.openDownloadRange}>
                            	    			Download XLSX (Range) <i className='icon-documents-downloadablefile'></i>
                            	    		</Button>
                            	    	</span>
                            	    </OverlayTrigger>
                            	</Col>
                            </Row>
                            <hr/>
                            <div className={'addPaddingTop alert alert-danger ' + (this.state.errorResults ? 'show' : 'hidden')} role="alert">
                                    An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage}
                                  </div>
                            <Row className={this.state.noResults ? 'show' : 'hidden'}>
                            	<Col md={12}>
                            		<h2>No Results Found</h2>
                            	</Col>
                            </Row>
                            <div className={this.state.errorResults || this.state.noResults ? 'hidden' : 'show'}>
                            	<div className='nodes container-fluid'>
                            		<div className='row-dsl'>
                            			{nodes}
                            			<div className={this.state.viewName === "VisualLayout" ? 'show' : 'hidden'}>
                            			    <OutputVisualization identifier="currentStateAggregate" width={ window.outerWidth * 0.8 } height="1200" overflow="scroll"/>
                                        </div>
                            		</div>
                            	</div>
                            </div>
							<Row className={this.state.showPagination ? 'show' : 'hidden'}>
						    	<Col md={6}>
								<Pagination
						    			activePage={this.state.aggregateActivePage}
						    			itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
						    			totalItemsCount={this.state.totalResults}
						    			pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
						    			onChange={this.handlePageChange} />
						    	</Col>
						    </Row>
						</div>)}
			    			</div>
							<Spinner loading={this.state.enableModelBusyFeedback}>
								{downloadRangeModel}
					  		</Spinner>
					</Spinner>
				</div>
				<div className='row'>
					<div className='col-sm-10'></div>
				</div>
			</div>
			</div>
		</div>
	</div>
  );
	}
}

export default CustomDsl;