/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you 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.
*/
var margin = {top: 15, right: 20, bottom: 30, left: 40};
var metricCWidth = 860 - margin.left - margin.right;
var metricCWideWidth = 1160 - margin.left - margin.right;
var svgCounterPadding = 40;
var metricCHeight = 380 - margin.top - margin.bottom - svgCounterPadding;
var runLineChart = null;
var max_bucket_idx = null;

stopLineChart = function() {
    if (runLineChart) {
    	clearInterval(runLineChart);
    }
};

getCounterMetricsForJob = function(callback, jobId, bIsNewJob) {

	var queryString = "metrics?job=" + jobId + "&metric=name:Count,type:counter";
	var metricData = [];
		
		d3.xhr(queryString, function(error, responseData) {
		  if (error) {
			  console.log("error retrieving metrics");
		  }
		  if (responseData) {
			   var metData = JSON.parse(responseData.response);
			   
			   if (metData.ops && metData.ops.length >= 1) {
				   				   
				   var data = [];
			
				   var ops = metData.ops;
				   ops.forEach(function(op) {
					  var obj = {};
					  obj.opId = op.opId;
					  // this presumes each metric array is of length one .. is that always true?
					  var metrics = op.metrics;
					  metrics.forEach(function(met) {
						 obj.type = met.type;
						 obj.opId = obj.opId;
						 obj.name = met.name;
						 obj.value = met.value;
					  });
					  data.push(obj);
				   });
				   metricData = data;
				   if (bIsNewJob) {
					   clearTupleMaxBucketIdx();
				   }
			   }
			   callback(jobId, metricData, bIsNewJob);
		  }
		});
};

getTupleCountMaxAndMin = function(counterMetrics) {
	if (counterMetrics.length > 0) {
		
		var getValue = function(metric) {
			return parseInt(metric.value, 10);
		};
		var minMax = d3.extent(counterMetrics, getValue);
		minMax.min = minMax[0]; //minMax[0] === minMax[1] ? 1 : minMax[0];
		minMax.max = minMax[1];
		return minMax;
	}
	return null;
};

formatNumber = function(number) {
	return d3.format(",")(number);
};

getTupleCountBucketsIndex = function(counterMetrics, aValue, bIsDerivedValue, isZero) {

	var maxMin = getTupleCountMaxAndMin(counterMetrics);
	var min = maxMin.min;
	var max = maxMin.max;
	
	var fMin = formatNumber(maxMin.min);
	var fMax = formatNumber(maxMin.max);
	var returnObj = {};
	
	var buckets = [];
	var whichBucket = null;
	
	var diff = max - min;
	var mid = parseInt((max - min)/2 + min, 10);
	var minMid = parseInt(mid - min/2, 10);
	
	var fMinMid = formatNumber(minMid);
	var fMid = formatNumber(mid);
	var x = 0;
	
	if (diff <= 100) {
		if (bIsDerivedValue) {
			buckets[x] = {id: x, name: "Not applicable - counter not present"};
			x++;
		}
		buckets[x] = {id: x, name: "0"};
		x++;
		buckets[x] = {id: x, name: "1 - " + fMid};
		x++;
		if (max > mid) {
			buckets[x] = {id: x, name: formatNumber(mid + 1) + " - " + fMax};
		}
		if (bIsDerivedValue) {
			whichBucket = 0;
		} else if (isZero || aValue === 0) {
			whichBucket = 0;
		} else if (aValue >=1 && aValue <= (mid + 1)) {
			whichBucket = 1;
		} else {
			whichBucket = 2;
		}
	} else if (diff > 100 && diff <= 1000) {
		if (bIsDerivedValue) {
			buckets[x] = {id: x, name: "Not applicable - counter not present"};
			x++;
		}
		buckets[x] = {id: x, name: "0"};
		x++;
		buckets[x] = {id: x, name: "1 - " + fMinMid};
		x++;
		if (min === 0) {
			buckets[x] = {id: x, name: formatNumber(mid + 1) + " - " + fMax};
			x++;
		} else {
			buckets[x] = {id: x, name: formatNumber(minMid + 1) + " - " + fMid};
			x++;
			buckets[x] = {id: x, name: formatNumber(mid + 1) + " - " + fMax};
		}
		
		
		if (bIsDerivedValue) {
			whichBucket = 0;
		} else if (isZero || aValue === 0) {
			whichBucket = 0;
		} else if (aValue >=1 && aValue <= minMid) {
			whichBucket = 1;
		} else if (min === 0 && aValue >= mid + 1) {
			whichBucket = 2;
		} else if (aValue >= minMid + 1 && aValue <= mid) {
			whichBucket = 2;
		} else {
			whichBucket = 3;
		}
	} else if (diff > 1000) {
		if (bIsDerivedValue) {
			buckets[x] = {id: x, name: "Not applicable - counter not present"};
			x++;
		}
		buckets[x] = {id: x, name: "0"};
		x++;
		
		var quarter = parseInt(min + ((max - min)/4), 10);
		var fQuarter = formatNumber(parseInt(min + (max - min)/4, 10));

		var quarter3 = parseInt(min + ((max - min) * 0.75), 10);
		var fQuarter3 = formatNumber(parseInt(min + ((max - min) * 0.75), 10));

		buckets[x] = {id: x, name: formatNumber(min + 1) + " - " + fQuarter};
		x++;
		buckets[x] = {id: x, name: formatNumber(quarter + 1) + " - " + fMid};
		x++;
		buckets[x] = {id: x, name: formatNumber(mid + 1) + " - " + fQuarter3};
		x++;
		buckets[x] = {id: x, name: formatNumber(quarter3 + 1) + " - " + fMax};
		if (bIsDerivedValue) {
			whichBucket = 0;
		} else if (isZero === 0 || aValue === 0) {
			whichBucket = 0;
		} else if (aValue >= 1 && aValue <= quarter) {
			whichBucket = 1;
		} else if (aValue >= quarter + 1 && aValue <= mid) {
			whichBucket = 2;
		} else if (aValue >= mid + 1 && aValue <= quarter3) {
			whichBucket = 3;
		} else {
			whichBucket = 4;
		}
	}
	returnObj.bucketIdx = whichBucket;
	returnObj.buckets = buckets;
	
	if (max_bucket_idx === null) {
		setTupleMaxBucketIdx(returnObj);
	} else if (returnObj.buckets.length >= max_bucket_idx.buckets.length) {
		setTupleMaxBucketIdx(returnObj);
	}

	return returnObj;	
};

setTupleMaxBucketIdx = function(nVal) {
	max_bucket_idx = nVal;
}

getTupleMaxBucketIdx = function() {
	return max_bucket_idx;
};

clearTupleMaxBucketIdx = function() {
	max_bucket_idx = null;
};

metricFunction = function(selectedJobId, metricSelected, bUseWideWidth) {
	stopLineChart();
	// metricSelected, i.e: name:Count,type:counter
	var queryString = "metrics?job=" + selectedJobId + "&metric=" + metricSelected;
	
	var metricName = metricSelected.split(",")[0].split(":")[1];
	var metricType = metricSelected.split(",")[1].split(":")[1];
	
	var chartWidth = metricCWideWidth;
	
	// rangeRoundBands specifies the width of each bar 
	// and the distance between each bar (second arg) and
	// the distance at the ends, third argument
	var x = d3.scale.ordinal()
	    .rangeRoundBands([0, chartWidth - margin.left - 200], 0.1, 0.5);
	
	var y = d3.scale.linear()
	    .range([metricCHeight, 0]);
	
	var xAxis = d3.svg.axis()
	    .scale(x)
	    .orient("bottom");
	
	if (bUseWideWidth) {
		 xAxis.tickFormat("");
	  }
	
	var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left")
	    .ticks(10, "");
	
	var svgCounter = d3.select("#metricsChart").append("svg")
	    .attr("width", chartWidth + margin.left + margin.right)
	    .attr("height", metricCHeight + margin.top + margin.bottom + svgCounterPadding)
	    .append("g")
	    .attr("transform", "translate(" + (margin.left + 80) +"," + margin.top + ")");
	
	d3.xhr(queryString, function(error, responseData) {
	  if (error) {
		  console.log("error retrieving metrics");
	  }
	  // remove the old metric chart
	  d3.select("#metricsChart").selectAll("*").remove();
	  
	  svgCounter = d3.select("#metricsChart").append("svg")
	   .attr("width", chartWidth + margin.left + margin.right)
	  .attr("height", metricCHeight + margin.top + margin.bottom + svgCounterPadding)
	  .append("g")
	  .attr("transform", "translate(" + (margin.left + 80) + "," + margin.top + ")");
	 
	   if (responseData) {
	   var metData = JSON.parse(responseData.response);
	   
	   if (metData.ops && metData.ops.length >= 1) {
		   var data = [];
	
		   var ops = metData.ops;
		   ops.forEach(function(op) {
			  var obj = {};
			  obj.opId = op.opId;
			  // this presumes each metric array is of length one .. is that always true?
			  var metrics = op.metrics;
			  metrics.forEach(function(met) {
				 obj.type = met.type;
				 obj.name = obj.opId;
				 obj.shortName = obj.opId.substring("OP_".length, obj.opId.length);
				 obj.value = met.value;
				 obj.metricName = met.name;
				 obj.opKind = vertexMap[obj.opId].invocation.kind;
			  });
			  data.push(obj);
		   });
		   
		   var sortData = function(objA, objB) {
        		 if (parseInt(objA.shortName) < parseInt(objB.shortName))  {
	         	    	return -1;
	         	     } else if (parseInt(objA.shortName) > parseInt(objB.shortName)){
	         	    	return 1;
	         	     } else {
	         	    	return 0;
	         	    }
		   };
		   
		   data.sort(sortData);
		   
	   x.domain(
			   data.map(
					   function(d) { 
						   // this is the value shown on the x axis tick marks
						   return  d.shortName; }));
	   
	   
	   var max = d3.max(data, function(d) {
		   if (d.type === "double") {
			   return parseFloat(d.value);
		   } else if (d.type === "long") {
			   return parseInt(d.value, 10);
		   } else {
			   return d.value;
		   }
		});
	   y.domain([0, max]);
	
	  svgCounter.append("g")
	      .attr("class", "x axis")
	      .attr("transform", "translate(0," + metricCHeight + ")")
	      .call(xAxis)
	      .append("text")
	      .attr("transform", "translate(" + (chartWidth - margin.left - 200)/2 + "," + svgCounterPadding + ")")
	      //.attr("dy", "1.2em") // this moves the text down relative to the axis
	      .style("text-anchor", "middle")
	      .style("font-size", "1.3em")
	      .text("Oplets");
	  
	  svgCounter.append("g")
	      .attr("class", "axis")
	      .call(yAxis)
	      .append("text")
	      .attr("transform", "rotate(-90)")
	      .attr("y", 6)
	      .attr("dy", ".9em")
	      .style("text-anchor", "end")
	      .style("font-size", "1.2em")
	      .data(data)
	      .text(function(d) {
	    	  if (d.metricName) {
	    		  return d.metricName;
	    	  }
	      });
	
	  var rect = svgCounter.selectAll(".foo")
	      .data(data)
	      .enter().append("rect")
	      .style("fill", function(d) {
	    		return opletColor[d.opKind];
	      })
	      .attr("x", function(d) { return x(d.shortName); })
	      .attr("width", x.rangeBand())
	      .attr("y", function(d) { 
	   	   if (d.type === "double") {
			   return y(parseFloat(d.value));
		   } else if (d.type === "long") {
			   return y(parseInt(d.value, 10));
		   } else {
			   return d.value;
		   }
	      })
	      .attr("height", function(d) { 
	   	   if (d.type === "double") {
			   return metricCHeight - y(parseFloat(d.value));
		   } else if (d.type === "long") {
			   return metricCHeight - y(parseInt(d.value, 10));
		   } else {
			   return d.value;
		   }
	      });
	  
	  rect.append("title")
      .text(function(d) {
    	  return "Name: " + d.shortName +
    	  "\nValue: " + d.value;
    	  });
	  
	   }
	   } 

	});

	function type(d) {
	  d.Count = +d.Count;
	  return d;
	}
	
};

plotMetricChartType = function(jobId, metricSelected) {
	var refreshT = 2500;
	var numPoints = 20;
	var n = 1;
	var data = [];
	var firstT = true;
    var queryString = "metrics?job=" + jobId + "&metric=" + metricSelected;
    var svgLineChart;
    var path;
    var line;
    var x;
    var yAxisScale;
    var yAxis;
    var clipPath;
        
    if (runLineChart) {
    	clearInterval(runLineChart);
    }
	
	if (firstT) {
		d3.select("#metricsChart").selectAll("*").remove();
	
		svgLineChart = d3.select("#metricsChart").append("svg")
		.attr("width", metricCWidth + margin.left + margin.right)
		.attr("height", metricCHeight + margin.top + margin.bottom + svgCounterPadding)
		.append("g")
		.attr("id", "lineChartG")
		.attr("transform", "translate(" + (margin.left + 80) + "," + margin.top + ")");
		
		
		svgLineChart.append("defs").append("clipPath")
	    .attr("id", "clip")
	    .append("rect")
	    .attr("width", metricCWidth)
	    .attr("height", metricCHeight);
		
		   x = d3.scale.linear()
		   .domain([0, numPoints - 1]) 
		    .range([0, metricCWidth - margin.left - 200]);

		   yAxisScale = d3.scale.linear()
		    .range([metricCHeight, 0]);
		   
		   d3.select("[class='x axis']").remove();

		   svgLineChart.append("g")
		    .attr("class", "x axis")
		    .attr("transform", "translate(0," + yAxisScale(0) + ")")
		    .call(d3.svg.axis().scale(x).orient("bottom"))
		    .append("text")
		    .attr("transform", "translate(" + (metricCWidth - margin.left -200)/2 + "," + svgCounterPadding + ")")
		      //.attr("dy", "1.2em") // this moves the text down relative to the axis
		    .style("text-anchor", "middle")
		    .style("font-size", "1.3em")
		    .text("Last 20 measures");

		
	} else {
		svgLineChart = d3.select("#lineChartG");
	}
   
	var getMetric = function(timeInt) {
		runLineChart = setInterval(function() {
			d3.xhr(queryString, function(error, responseData) {
		
			  if (error) {
				  console.log("error retrieving metrics");
			  }
			  if (responseData) {
				   var metData = JSON.parse(responseData.response);
		
				   if (metData !== "") {
			 
					   var ops = metData.ops;
					   ops.forEach(function(op) {
						  var obj = {};
						  obj.opId = op.opId;
						  // this presumes each metric array is of length one .. is that always true?
						  var metrics = op.metrics;
						  metrics.forEach(function(met) {
							 obj.type = met.type;
							 obj.name = obj.opId;
							 obj.value = met.value;
							 obj.metricName = met.name;
						  });

						  data.push(obj);
						  if (n >= numPoints) {
							 data.shift();
						  }
						  n++;
					   });
				   }
				   
				   var type = "long";
				   
				   var max = d3.max(data, function(d) {
					   if (d.type === "double") {
						   type = "double";
						 return parseFloat(d.value);
					   } else if (d.type === "long") {
						   type = "long";
						   return parseInt(d.value, 10);
					   } else {
						   return d.value;
					   }
					});
				   
				   var min = d3.min(data, function(d) {
					   if (d.type === "double") {
						 return parseFloat(d.value);
					   } else if (d.type === "long") {
						   return parseInt(d.value, 10);
					   } else {
						   return d.value;
					   }
					});
				   
				   if (min > 0) {
					   min -= 0.01 * min;
				   } 

				   if (type === "long") {
					   yAxisScale.domain([parseInt(min, 10), parseInt((max + max * 0.01), 10)]);
				   } else if (type === "double") {
					   yAxisScale.domain([parseFloat(min), parseFloat(max + max * 0.01)]);
				   }
				   
				   yAxis = d3.svg.axis()
				   .scale(yAxisScale)
				   .orient("left");
				   
				   // remove the old one, then add this one
				   d3.select("[class='y axis']").remove();
				   
				   svgLineChart.append("g")
				    .attr("class", "y axis")
				    .call(yAxis)
				    .append("text")
				    .attr("transform", "rotate(-90)")
				    .attr("y", 6)
				    .attr("dy", ".9em")
				    .style("text-anchor", "end")
				    .style("font-size", "1.2em")
				    .data(data)
				    .text(function(d) {
				    	if (d.metricName) {
				    		return d.metricName;
				    	}
				    });
				   
				   
				   line = d3.svg.line()
				    .x(function(d, i) {return x(i); })
				    .y(
				    		function(d, i) {
				    			
				    			if (d.type === "double") {
				    				return yAxisScale(parseFloat(d.value));
				    			} else if (d.type === "long") {
				    				return yAxisScale(parseInt(d.value, 10));
				    			} else {
				    				return yAxisScale(d.value);
				    			}
				    		});
			   if (!firstT) {
				   // first remove the old path, then add the new one
				   d3.select("#linePath").remove();

					   path = clipPath
				   		.append("path")
				   		.datum(data)
				   		.attr("id", "linePath")
				   		.attr("class", "line")
				   		.attr("d", line);
				 
				 
					   path
					   .attr("d", line)
					   .attr("transform", null)
					   .transition()
					   .duration(2500)
					   .ease("linear");
				   
			   }
			   if (timeInt < refreshT) {
				   clearInterval(runLineChart);
				   getMetric(refreshT);
			   }
			 }
		});
		}, refreshT);
	};
	
	var d = new Date();
	getMetric(100);
	clipPath = svgLineChart
		.append("g")
		.attr("clip-path", "url(#clip)");
	
	path = clipPath
		.append("path")
		.datum(data)
		.attr("id", "linePath")
		.attr("class", "line")
		.attr("d", line);
			
	firstT = false;
				     
};

/*
 * This returns only the name and type of the metric
 * i.e, name: Count, type: "counter" or type "meter"
 */
metricsAvailable = function(queryString, jobId, bIsNewJob) {
	d3.xhr(queryString, function(error, responseData) {
		  if (error) {
			  console.log("error retrieving available metrics");
		  }
		  if (!responseData) {
			  return;
		  }
		  if (responseData === "") {
			  return;
		  }
		   var metData = JSON.parse(responseData.response);

		   var ops = metData.ops;
		   var objectArray = [];
		   
		   // iterate over the metrics, getting the name to populate the drop down
           if (ops.length > 0) {
        	   // don't repeat the metric type, just show the metric once, and which operator has it
        	   var metricMap = {};
        	   
        	   ops.forEach(function(op) {
        		   var metrics = op.metrics;
        		   metrics.forEach(function(metric) {
        			   if (!metricMap[metric.name]) {
        				   metricMap[metric.name] = {"name": metric.name, "type": metric.type, "value": metric.value ? metric.value : null, "ops": []};
        				   metricMap[metric.name].ops.push(op.opId);
        				   objectArray.push(metricMap[metric.name]);
        			   } else {
        				   metricMap[metric.name].ops.push(op.opId);
        			   }
        		   });
        	   });
        	   
        	   var sortF = function(objA, objB) {
        		 if (objA.name < objB.name)  {
        	    	return -1;
        	     } else if (objA.name > objB.name) {
        	    	return 1;
        	     } else {
        	    	return 0;
        	    }
        	   };
        		
        		// there are metrics available
        	    if (objectArray && objectArray.length > 0) {
        	    	// make sure the flow option is available
             	   var flowOption = d3.select("#layers")
            	   .selectAll("option")
            	   	.filter(function (d, i){
            	   		return this.value === "flow";
            	   	});
             	   
             	   if (flowOption.property("disabled") === true) {
             		  flowOption.property("disabled", false);
             	   }

            	   
        	    	objectArray.sort(sortF);

        	       var metricsDiv = d3.select("#metricsDiv");
        	       if (metricsDiv.style("display") === "none") {
        	    	   metricsDiv.style("display", "block");
        	    	   // reset the chart type to bar
               	      d3.select("#mChartType").node().value = "barChart";
        	       }
        	    	// don't deselect the previously selected metric, but reset to bar charts
        	    	
        	    	var metricsSelect = d3.select("#metrics");
        	    	var previouslySelected = metricsSelect.node().value;
        	    	metricsSelect.selectAll("*").remove();
        	    	var selectWidth = 0;
        	    	var rateUnitVal = "";
        	    	var useWideWidth = false;
        	    	objectArray.forEach(function(obj) {
        	    		var tempWidth;
        	    		var value = "name:" + obj.name +",type:" + obj.type;
        	    		if (obj.name === "RateUnit" && obj.value) {
        	    			// get the value for the Rate Unit, append it for all "meter" types
        	    			rateUnitVal = obj.value;
        	    		} else {
        	    		   var opsText = "";
        	    		   var sortOps = function(opA, opB) {
        	          		 if (parseInt(opA.substring("OP_".length, opA.length)) < parseInt(opB.substring("OP_".length, opB.length)))  {
        	         	    	return -1;
        	         	     } else if (parseInt(opA.substring("OP_".length, opA.length)) > parseInt(opB.substring("OP_".length, opB.length))){
        	         	    	return 1;
        	         	     } else {
        	         	    	return 0;
        	         	    }
        	    		   };
        	    		   obj.ops.sort(sortOps);
        	    		   obj.ops.forEach(function (op){
        	    			   opsText += op.substring("OP_".length, op.length) + ",";
        	    		   });
        	    		   if (opsText.length > 100) {
        	    			   var splitOps = opsText.split(",");
        	    			   var scale = 100/opsText.length;
        	    			   var num = parseInt(scale * splitOps.length, 10);
        	    			   opsText = splitOps.splice(0,num).toString() + " ...";
        	    			   useWideWidth = true;
        	    		   } 

	        	           var opt = metricsSelect
	        	           .append("option")
	        	           .text(obj.name + ", oplets: " + opsText)
	        	           .attr("multipleops", obj.ops.length > 1 ? true : false)
	        	           .attr("value", "name:" + obj.name +",type:" + obj.type);
	        	           if (value === previouslySelected) {
	        	    			opt.attr("selected", true);
	        	    		}
	        	           // append to the span with the id of rateUnit the value
	        	           tempWidth = metricsSelect.node().clientWidth;
	        	           if (tempWidth > selectWidth) {
	        	        	   selectWidth = tempWidth;
	        	           }
        	    		}
        		   });
        	    	
        	    	var rateUnitSpan = d3.select("#rateUnit");
        	    	var selectedMetric = metricsSelect.node().value;
        	    	var isCounter = selectedMetric.split(":")[1].toUpperCase().indexOf("COUNT") !== -1;
        	    	if (rateUnitVal !== "" && !isCounter) {
        	    		rateUnitSpan.style("visibility", "visible");
        	    		var metricLeft = metricsSelect.style("left");
        	    		var left = parseInt(metricLeft, 10);
        	    		rateUnitSpan.style("margin-left", left + selectWidth + 10 + "px");
        	    		rateUnitSpan.text(rateUnitVal);
        	    		useWideWidth = false;
        	    	} else {
        	    		rateUnitSpan.style("visibility", "hidden");
        	    	}
        	    	
        	    	var isMultipleOpsSelected = metricsSelect
        	        .selectAll("option")
        	        .filter(function (d, i) { 
        	            return this.selected; 
        	        });
        	    	
        	    	var multiple = isMultipleOpsSelected.attr("multipleops");
        	    	var chartType = d3.select("#mChartType");
        	    	var selectedChart = chartType.node().value;
        	    	
        	    	var lineChartOption = chartType.selectAll("option")
	    			.filter(function (d, i){
	    				return this.value === "lineChart";
	    			});
        	    	var jobId = d3.select("#jobs").node().value;
        	    	if ( selectedChart === "barChart") {
        	    		metricFunction(jobId, metricsSelect.node().value, useWideWidth);
        	    		// if multiple is true, disable the linechart option
        	    		if (multiple === "true") {
        	    			lineChartOption.property("disabled", true);
        	    		} else {
        	    			lineChartOption.property("disabled", false);
        	    		}
        	    	} else {
        	    		// it's a line chart - if the metric selected has multiple oplets, deselect linechart and select bar chart
        	    		if (multiple === "true") {
        	    			stopLineChart();
        	    			lineChartOption.property("disabled", true);
        	    			d3.select("#mChartType").node().value = "barChart";
            	    		metricFunction(jobId, metricsSelect.node().value, useWideWidth);	
        	    		} else if (multiple === "false" && bIsNewJob && bIsNewJob === true) {
        	    			stopLineChart();
        	    			// restart it
        	    			d3.select("#mChartType").node().value = "lineChart";
        	    			var jobId = d3.select("#jobs").node().value;
        	    			var metricSelected = d3.select("#metrics").node().value;
        	    			plotMetricChartType(jobId, metricSelected);
        	    		} 
         	    	}
        	    	
        	    }
           } else {
        	   d3.select("#metricsDiv")
        	   .style("display", "none");
        	  // disable the "flow" option
        	   var layerSelect = d3.select("#layers");
        	   var selected = layerSelect.node().value;
        	   // if there are no metrics there are no tuple counts
        	   var flowOption = layerSelect
        	   .selectAll("option")
        	   	.filter(function (d, i){
        	   		return this.value === "flow";
        	   	});

        	   flowOption.property("disabled", true);
        	   if (selected === "flow") {
        		   // select opletType
        		   layerSelect.node().value = "opletColor";
        		   resetAll();  
        	   }
           }
           
	});
};