Fixes bugs and minor issues in the ensemble mode. See PR for details.

.flake8

@@ -5,7 +5,7 @@
 ignore = E203, E266, E501, W503
 # line length is intentionally set to 80 here because black uses Bugbear
 # See https://github.com/psf/black/blob/master/README.md#line-length for more details
-max-line-length = 120
+max-line-length = 80
 max-complexity = 18
 select = B,C,E,F,W,T4,B9
 # We need to configure the mypy.ini because the flake8-mypy's default

app/src/components/callflowEnsemble.js

@@ -171,11 +171,6 @@ export default {
 				"re_process": 1
 			});
 		});
-
-		EventHandler.$on("show_target_auxiliary", (data) => {
-			this.clearLocal();
-			this.init();
-		});
 	},
 
 	beforeDestroy() {
@@ -326,12 +321,8 @@ export default {
 			this.$store.selectedFunctionsInCCT = this.selectedFunctionsInCCT;
 			this.$store.selectedHierarchyMode = this.selectedHierarchyMode;
 			this.$store.selectedFormat = this.selectedFormat;
-			if (this.$store.selectedMode == "Single") {
-				this.$store.selectedProp = "rank";
-			}
-			else {
-				this.$store.selectedProp = this.selectedProp;
-			}
+
+			this.$store.selectedProp = this.selectedProp;
 			this.$store.selectedScale = this.selectedScale;
 			this.$store.selectedCompareMode = this.selectedCompareMode;
 			this.$store.selectedIQRFactor = this.selectedIQRFactor;
@@ -402,33 +393,17 @@ export default {
 		setRuntimeColorScale() {
 			let colorMin = null;
 			let colorMax = null;
-			if (this.selectedMode == "Ensemble") {
-				if (this.selectedMetric == "Inclusive") {
-					colorMin = parseFloat(this.$store.minIncTime["ensemble"]);
-					colorMax = parseFloat(this.$store.maxIncTime["ensemble"]);
-				}
-				else if (this.selectedMetric == "Exclusive") {
-					colorMin = parseFloat(this.$store.minExcTime["ensemble"]);
-					colorMax = parseFloat(this.$store.maxExcTime["ensemble"]);
-				}
-				else if (this.selectedMetric == "Imbalance") {
-					colorMin = 0.0;
-					colorMax = 1.0;
-				}
+			if (this.selectedMetric == "Inclusive") {
+				colorMin = parseFloat(this.$store.minIncTime["ensemble"]);
+				colorMax = parseFloat(this.$store.maxIncTime["ensemble"]);
 			}
-			else if (this.selectedMode == "Single") {
-				if (this.selectedMetric == "Inclusive") {
-					colorMin = parseFloat(this.$store.minIncTime[this.selectedTargetDataset]);
-					colorMax = parseFloat(this.$store.maxIncTime[this.selectedTargetDataset]);
-				}
-				else if (this.selectedMetric == "Exclusive") {
-					colorMin = parseFloat(this.$store.minExcTime[this.selectedTargetDataset]);
-					colorMax = parseFloat(this.$store.maxExcTime[this.selectedTargetDataset]);
-				}
-				else if (this.selectedMetric == "Imbalance") {
-					colorMin = 0.0;
-					colorMax = 1.0;
-				}
+			else if (this.selectedMetric == "Exclusive") {
+				colorMin = parseFloat(this.$store.minExcTime["ensemble"]);
+				colorMax = parseFloat(this.$store.maxExcTime["ensemble"]);
+			}
+			else if (this.selectedMetric == "Imbalance") {
+				colorMin = 0.0;
+				colorMax = 1.0;
 			}
 
 			this.selectedColorMinText = utils.formatRuntimeWithoutUnits(parseFloat(colorMin));
@@ -520,25 +495,21 @@ export default {
 			this.$store.selectedModule = this.selectedModule;
 		},
 
-		clear() {
-			if (this.selectedMode == "Ensemble") {
-				if (this.selectedFormat == "CCT") {
-					this.clearComponents(this.currentEnsembleCCTComponents);
-				}
-				else if (this.selectedFormat == "SuperGraph") {
-					this.clearComponents(this.currentEnsembleSuperGraphComponents);
-				}
+		clearLocal() {
+			if (this.selectedFormat == "CCT") {
+				this.clearComponents(this.currentEnsembleCCTComponents);
+			}
+			else if (this.selectedFormat == "SuperGraph") {
+				this.clearComponents(this.currentEnsembleSuperGraphComponents);
 			}
 		},
 
-		clearLocal() {
-			if (this.selectedMode == "Ensemble") {
-				if (this.selectedFormat == "CCT") {
-					this.clearComponents(this.currentEnsembleSuperGraphComponents);
-				}
-				else if (this.selectedFormat == "SuperGraph") {
-					this.clearComponents(this.currentEnsembleCCTComponents);
-				}
+		clear() {
+			if (this.selectedFormat == "CCT") {
+				this.clearComponents(this.currentEnsembleSuperGraphComponents);
+			}
+			else if (this.selectedFormat == "SuperGraph") {
+				this.clearComponents(this.currentEnsembleCCTComponents);
 			}
 		},
 
@@ -567,29 +538,18 @@ export default {
 				this.setSelectedModule();
 			}
 
-			console.log("Mode : ", this.selectedMode);
-			console.log("Number of runs :", this.$store.numOfRuns);
-			console.log("Dataset : ", this.selectedTargetDataset);
-			console.log("Format = ", this.selectedFormat);
+			console.info("Mode : ", this.selectedMode);
+			console.info("Number of runs :", this.$store.numOfRuns);
+			console.info("Dataset : ", this.selectedTargetDataset);
+			console.info("Format = ", this.selectedFormat);
 
-			// Call the appropriate socket to query the server.
-			if (this.selectedMode == "Single") {
-
-				if (this.selectedFormat == "SuperGraph") {
-					this.initComponents(this.currentSingleSuperGraphComponents);
-				}
-				else if (this.selectedFormat == "CCT") {
-					this.initComponents(this.currentSingleCCTComponents);
-				}
+			if (this.selectedFormat == "SuperGraph") {
+				this.initComponents(this.currentEnsembleSuperGraphComponents);
 			}
-			else if (this.selectedMode == "Ensemble") {
-				if (this.selectedFormat == "SuperGraph") {
-					this.initComponents(this.currentEnsembleSuperGraphComponents);
-				}
-				else if (this.selectedFormat == "CCT") {
-					this.initComponents(this.currentEnsembleCCTComponents);
-				}
+			else if (this.selectedFormat == "CCT") {
+				this.initComponents(this.currentEnsembleCCTComponents);
 			}
+			EventHandler.$emit("ensemble-auxiliary", {});
 		},
 
 		reset() {
@@ -654,18 +614,17 @@ export default {
 			this.clearLocal();
 			this.$socket.emit("init", {
 				mode: this.selectedMode,
-				dataset: this.$store	.selectedTargetDataset
+				dataset: this.$store.selectedTargetDataset
 			});
 			this.init();
 		},
 
 		updateTargetDataset() {
 			this.$store.selectedTargetDataset = this.selectedTargetDataset;
 			this.$store.compareDataset = "";
-			this.$store.encoding = "MeanGradients";
-			console.debug("[Update] Target Dataset: ", this.selectedTargetDataset);
-			EventHandler.$emit("show-target-auxiliary", {
-			});
+			this.$store.encoding = "MEAN_GRADIENTS";
+			console.info("[Update] Target Dataset: ", this.selectedTargetDataset);
+			this.clearLocal();
 			this.init();
 		},
 
@@ -731,7 +690,7 @@ export default {
 
 		updateProp() {
 			this.$store.selectedProp = this.selectedProp;
-			this.clear();
+			this.clearLocal();
 			this.init();
 		},
 
@@ -767,8 +726,7 @@ export default {
 			this.$store.showTarget = this.showTarget;
 			this.clear();
 			this.init();
-			EventHandler.$emit("show-target-auxiliary", {
-			});
+			EventHandler.$emit("ensemble-auxiliary", {});
 		},
 
 		updateColorMin() {

app/src/components/callflowSingle.js

@@ -477,26 +477,24 @@ export default {
 
 		init() {
 			console.assert(this.selectedMode, "Single");
-			// Initialize colors
-			this.setupColors();
-			this.setOtherData();
-			if (this.selectedFormat == "SuperGraph") {
-				this.setSelectedModule();
-			}
-
 			console.log("Mode : ", this.selectedMode);
 			console.log("Number of runs :", this.$store.numOfRuns);
 			console.log("Dataset : ", this.selectedTargetDataset);
 			console.log("Format = ", this.selectedFormat);
 
+			// Initialize colors
+			this.setupColors();
+			this.setOtherData();
+
 			// Call the appropriate socket to query the server.
 			if (this.selectedFormat == "SuperGraph") {
+				this.setSelectedModule();
 				this.initComponents(this.currentSingleSuperGraphComponents);
 			}
 			else if (this.selectedFormat == "CCT") {
 				this.initComponents(this.currentSingleCCTComponents);
 			}
-			EventHandler.$emit("show-target-auxiliary", {});
+			EventHandler.$emit("single-auxiliary", {});
 		},
 
 		reset() {
@@ -539,16 +537,6 @@ export default {
 			this.init();
 		},
 
-		updateColor() {
-			this.clearLocal();
-			this.init();
-		},
-
-		updateColorPoint() {
-			this.clearLocal();
-			this.init();
-		},
-
 		updateFunctionsInCCT() {
 			this.$socket.emit("cct", {
 				dataset: this.$store.selectedTargetDataset,

app/src/components/callsiteCorrespondence/box.js

@@ -6,6 +6,7 @@
  */
 
 import * as d3 from "d3";
+import * as utils from "../utils";
 
 export default {
 	name: "Box",
@@ -16,7 +17,8 @@ export default {
 		paddingTop: 10,
 		textOffset: 40,
 		fontSize: 10,
-		debug: false
+		debug: false,
+		superscript: "⁰¹²³⁴⁵⁶⁷⁸⁹",
 	}),
 
 	methods: {
@@ -44,6 +46,7 @@ export default {
 				this.targetBox();
 			}
 			this.centerLine();
+			this.axis();
 			this.$parent.$refs.ToolTip.init("boxplot-" + callsite.id);
 		},
 
@@ -120,6 +123,59 @@ export default {
 				this.g.selectAll(".targetbox").remove();
 			}
 			this.g.selectAll(".centerLine").remove();
-		}
+		},
+
+		/**
+		 * Add label for the x-axis.
+		 */
+		addxAxisLabel() {
+			let max_value = this.xScale.domain()[1];
+			this.x_max_exponent = utils.formatExponent(max_value);
+			let exponent_string = this.superscript[this.x_max_exponent];
+			let label = "(e+" + this.x_max_exponent + ") " + "Exclusive Runtime (" + "\u03BCs)";
+			this.g.append("text")
+				.attr("class", "axis-label")
+				.attr("x", this.$parent.boxWidth - 20)
+				.attr("y", this.$parent.centerLinePosition * 3.8)
+				.style("font-size", "12px")
+				.style("text-anchor", "end")
+				.text(label);
+		},
+
+		/**
+		 * Draw the axis for hte boxplot.
+		 */
+		axis() {
+			this.addxAxisLabel();
+			const xAxis = d3.axisBottom(this.xScale)
+				.ticks(5)
+				.tickFormat((d, i) => {
+					let runtime = utils.formatRuntimeWithExponent(d, 1);
+					return `${runtime[0]}`;
+				});
+
+			const xAxisLine = this.g.append("g")
+				.attrs({
+					"class": "axis",
+					"id": "xAxis",
+					"transform": "translate(" + 0 + "," + 2.5 * this.$parent.centerLinePosition + ")"
+				})
+				.call(xAxis);
+
+			xAxisLine.selectAll("path")
+				.style("fill", "none")
+				.style("stroke", "black")
+				.style("stroke-width", "1px");
+
+			xAxisLine.selectAll("line")
+				.style("fill", "none")
+				.style("stroke", "black")
+				.style("stroke-width", "1px");
+
+			xAxisLine.selectAll("text")
+				.style("font-size", "12px")
+				.style("font-family", "sans-serif")
+				.style("font-weight", "lighter");
+		},
 	}
 };