Fix Splitting interactions - Basic

app/src/components/callflowEnsemble.js

@@ -549,7 +549,7 @@ export default {
 			else if (this.selectedFormat == "CCT") {
 				this.initComponents(this.currentEnsembleCCTComponents);
 			}
-			EventHandler.$emit("ensemble-auxiliary", {});
+			EventHandler.$emit("ensemble-refresh-boxplot", {});
 		},
 
 		reset() {
@@ -679,15 +679,6 @@ export default {
 			});
 		},
 
-		updateCompareMode() {
-			this.$store.selectedCompareMode = this.selectedCompareMode;
-			this.$socket.emit("compare", {
-				targetDataset: this.$store.selectedTargetDataset,
-				compareDataset: this.$store.selectedCompareDataset,
-				selectedMetric: this.$store.selectedMetric
-			});
-		},
-
 		updateProp() {
 			this.$store.selectedProp = this.selectedProp;
 			this.clearLocal();

app/src/components/callflowSingle.js

@@ -494,7 +494,7 @@ export default {
 			else if (this.selectedFormat == "CCT") {
 				this.initComponents(this.currentSingleCCTComponents);
 			}
-			EventHandler.$emit("single-auxiliary", {});
+			EventHandler.$emit("single-refresh-boxplot", {});
 		},
 
 		reset() {
@@ -523,6 +523,7 @@ export default {
 			this.clear();
 			this.$store.selectedTargetDataset = this.selectedTargetDataset;
 			console.debug("[Update] Target Dataset: ", this.selectedTargetDataset);
+			d3.selectAll(".tick").remove();
 			this.init();
 		},
 

app/src/components/callsiteCorrespondence/boxplot.js

@@ -62,7 +62,7 @@ export default {
 	mounted() {
 		this.init();
 		let self = this;
-		EventHandler.$on("ensemble-auxiliary", (data) => {
+		EventHandler.$on("ensemble-refresh-boxplot", (data) => {
 			self.clear();
 			self.init();
 		});

app/src/components/callsiteCorrespondence/callsiteCorrespondence.js

@@ -70,29 +70,26 @@ export default {
 	}),
 	mounted() {
 		let self = this;
+
+		EventHandler.$on("highlight-dataset", (data) => {
+			let dataset = data["dataset"];
+			if (self.$store.showTarget) {
+				self.highlightCallsitesByDataset(dataset);
+			}
+		});
+
 		EventHandler.$on("highlight-datasets", (datasets) => {
 			console.log("[Interaction] Highlighting the datasets :", datasets);
 			self.highlight(datasets);
 		});
 
-		EventHandler.$on("update-auxiliary-sort-by", (sortBy) => {
-			self.updateSortBy(sortBy);
-		});
-
-		EventHandler.$on("select-module", (data) => {
+		EventHandler.$on("ensemble-select-module", (data) => {
 			let thismodule = data["module"];
 			// self.selectCallsitesByModule(thismodule)
 			this.isModuleSelected = true;
 			self.selectModule(thismodule);
 		});
 
-		EventHandler.$on("highlight-dataset", (data) => {
-			let dataset = data["dataset"];
-			if (self.$store.showTarget) {
-				self.highlightCallsitesByDataset(dataset);
-			}
-		});
-
 		EventHandler.$on("callsite-information-sort", (data) => {
 			let attribute = self.$store.selectedRuntimeSortBy;
 			self.differenceCallsites = self.sortByAttribute(self.knc["difference"], attribute);
@@ -309,6 +306,7 @@ export default {
 			event.stopPropagation();
 			let callsite = event.currentTarget.id;
 			this.$socket.emit("reveal_callsite", {
+				mode: this.$store.selectedMode,
 				reveal_callsites: this.revealCallsites,
 				datasets: this.$store.selectedDatasets,
 			});
@@ -427,17 +425,19 @@ export default {
 		split() {
 			if (this.isEntryFunctionSelected == "select-callsite") {
 				this.$socket.emit("split_by_entry_callsites", {
+					mode: this.$store.selectedMode,
 					selectedModule: this.$store.selectedModule,
 					datasets: this.$store.selectedDatasets,
 				});
-				EventHandler.$emit("split-by-entry-callsites");
+				EventHandler.$emit("reveal-callsite");
 			}
 			else if (this.isCalleeSelected == "select-callsite") {
 				this.$socket.emit("split_by_callees", {
+					mode: this.$store.selectedMode,
 					selectedModule: this.$store.selectedModule,
 					datasets: this.$store.selectedDatasets,
 				});
-				EventHandler.$emit("split-by-callees");
+				EventHandler.$emit("reveal-callsite");
 			}
 		}
 	}

app/src/components/callsiteCorrespondence/markers.js

@@ -67,13 +67,13 @@ export default {
 			this.targetData = this.targetq;
 			this.data = this.q;
 
-			this.minMaxEnsembleMarker();
+			// this.minMaxEnsembleMarker();
 			if (this.$store.showTarget) {
 				this.minMaxTargetMarker();
 			}
-			this.minText();
-			this.maxText();
-			this.medianText();
+			// this.minText();
+			// this.maxText();
+			// this.medianText();
 		},
 
 		minMaxEnsembleMarker() {

app/src/components/callsiteInformation/box.js

@@ -48,8 +48,8 @@ export default {
 				});
 
 			this.box();
-			this.centerLine();
 			this.axis();
+			this.centerLine();
 			this.$parent.$refs.ToolTip.init("boxplot-" + callsite.id);
 		},
 
@@ -112,7 +112,7 @@ export default {
 			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("class", "boxplot-axis-label")
 				.attr("x", this.$parent.boxWidth - 20)
 				.attr("y", this.$parent.centerLinePosition * 3.8)
 				.style("font-size", "12px")
@@ -134,8 +134,7 @@ export default {
 
 			const xAxisLine = this.g.append("g")
 				.attrs({
-					"class": "axis",
-					"id": "xAxis",
+					"class": "boxplot-axis",
 					"transform": "translate(" + 0 + "," + 2.5 * this.$parent.centerLinePosition + ")"
 				})
 				.call(xAxis);
@@ -162,8 +161,8 @@ export default {
 		clear() {
 			this.g.selectAll(".box").remove();
 			this.g.selectAll(".centerLine").remove();
-			this.g.selectAll(".axis-label").remove();
-			this.g.selectAll(".axis").remove();
+			this.g.selectAll(".boxplot-axis-label").remove();
+			this.g.selectAll(".boxplot-axis").remove();
 		}
 	}
 };

app/src/components/callsiteInformation/boxplot.js

@@ -63,7 +63,7 @@ export default {
 		this.init();
 		let self = this;
 
-		EventHandler.$on("single-auxiliary", (data) => {
+		EventHandler.$on("single-refresh-boxplot", (data) => {
 			self.clear();
 			self.init();
 		});
@@ -91,6 +91,7 @@ export default {
 
 			this.svg = d3.select("#boxplot-" + this.callsite.id)
 				.attrs({
+					"class": "boxplot",
 					"width": this.containerWidth,
 					"height": this.containerHeight
 				});

app/src/components/callsiteInformation/callsiteInformation.js

@@ -65,7 +65,8 @@ export default {
 		/**
 		 * Event handler when a user selects a supernode.
 		 */
-		EventHandler.$on("select_module", (data) => {
+		EventHandler.$on("single-select-module", (data) => {
+			this.isModuleSelected = true;
 			self.selectModule(data["module"]);
 		});
 
@@ -156,7 +157,6 @@ export default {
 				this.mean[callsite] = utils.formatRuntimeWithoutUnits(data["mean_time"]);
 				this.variance[callsite] = utils.formatRuntimeWithoutUnits(data["variance"]);
 				this.stdDeviation[callsite] = utils.formatRuntimeWithoutUnits(data["std_deviation"]);
-
 				this.selectClassName[callsite] = "unselect-callsite";
 			}
 		},
@@ -217,7 +217,6 @@ export default {
 			else {
 				this.switchIsSelectedCallsite(true);
 			}
-			console.debug("Selected callsites: ", this.revealCallsites);
 		},
 
 		/**
@@ -309,12 +308,12 @@ export default {
 		 * 
 		 * @param {*} event 
 		 */
-		clickCallsite(event) {
+		revealCallsite(event) {
 			event.stopPropagation();
-			let callsite = event.currentTarget.id;
 			this.$socket.emit("reveal_callsite", {
+				mode: this.$store.selectedMode,
 				reveal_callsites: this.revealCallsites,
-				datasets: this.$store.selectedDatasets,
+				dataset: this.$store.selectedTargetDataset,
 			});
 
 			EventHandler.$emit("reveal-callsite");
@@ -363,18 +362,18 @@ export default {
 
 			this.numberOfCallsites = Object.keys(callsites_in_module).length;
 
-			// Clear up the current callsites map.
-			this.callsites = {};
-
 			// Set display: none to all .callsite-information-node.
 			// This hides the nodes when a supernode is selected.
-			d3.selectAll(".callsite-information-node").style("display", "none");
+			for(let callsite in this.callsites){
+				d3.select("#callsite-information-" + callsite.id).style("display", "none");
+			}
+
+			// Clear up the current callsites map.
+			this.callsites = {};
 
 			// Set the data and render each callsite.
 			callsites_in_module.forEach((callsite) => {
-				if (callsites_in_module.indexOf(callsite) > -1) {
-					this.callsites[callsite] = this.$store.callsites[this.$store.selectedTargetDataset][callsite];
-				}
+				this.callsites[callsite] = this.$store.callsites[this.$store.selectedTargetDataset][callsite];
 				d3.select("#callsite-information-" + this.callsites[callsite].id).style("display", "block");
 			});
 		},
@@ -420,14 +419,14 @@ export default {
 			if (this.isEntryFunctionSelected == "select-callsite") {
 				this.$socket.emit("split_by_entry_callsites", {
 					selectedModule: this.$store.selectedModule,
-					datasets: this.$store.selectedDatasets,
+					dataset: this.$store.selectedTargetDataset,
 				});
 				EventHandler.$emit("split-by-entry-callsites");
 			}
 			else if (this.isCalleeSelected == "select-callsite") {
 				this.$socket.emit("split_by_callees", {
 					selectedModule: this.$store.selectedModule,
-					datasets: this.$store.selectedDatasets,
+					dataset: this.$store.selectedTargetDataset,
 				});
 				EventHandler.$emit("split-by-callees");
 			}

app/src/components/callsiteInformation/markers.js

@@ -79,9 +79,9 @@ export default {
 			this.data = this.q;
 
 			this.minMaxTargetMarker();
-			this.minText();
-			this.maxText();
-			this.medianText();
+			// this.minText();
+			// this.maxText();
+			// this.medianText();
 		},
 
 

app/src/components/singleHistogram/singleHistogram.js

@@ -126,7 +126,6 @@ export default {
 			d3.selectAll(".histogram-axis-label").remove();
 			d3.selectAll(".binRank").remove();
 			d3.selectAll(".lineRank").remove();
-			d3.selectAll(".tick").remove();
 			d3.selectAll(".brush").remove();
 			this.$refs.ToolTip.clear();
 		},

app/src/components/supergraph/encodings/meanGradients.js

@@ -31,14 +31,14 @@ export default {
 
 		gradients() {
 			for (let node of this.nodes) {
-				var defs = d3.select("#" + this.id)
+				const defs = d3.select("#" + this.id)
 					.append("defs");
 
-				this.linearGradient = defs.append("linearGradient")
+				const linearGradient = defs.append("linearGradient")
 					.attr("id", "mean-gradient" + node.client_idx)
 					.attr("class", "mean-gradient");
 
-				this.linearGradient
+				linearGradient
 					.attr("x1", "0%")
 					.attr("y1", "0%")
 					.attr("x2", "0%")
@@ -53,7 +53,6 @@ export default {
 				else if (node.type == "component-node") {
 					grid = this.$store.callsites["ensemble"][node.name][this.$store.selectedMetric]["gradients"]["hist"]["x"];
 					val = this.$store.callsites["ensemble"][node.name][this.$store.selectedMetric]["gradients"]["hist"]["y"];
-
 				}
 				else if (node.type == "intermediate") {
 					grid = [];
@@ -63,7 +62,7 @@ export default {
 				for (let i = 0; i < grid.length; i += 1) {
 					let x = (i + i + 1) / (2 * grid.length);
 					let current_value = (val[i]);
-					this.linearGradient.append("stop")
+					linearGradient.append("stop")
 						.attr("offset", 100 * x + "%")
 						.attr("stop-color", this.$store.distributionColor.getColorByValue(current_value));
 				}
@@ -143,7 +142,7 @@ export default {
 		},
 
 		clear() {
-			this.containerG.selectAll(".mean-gradient").remove();
+			// this.containerG.selectAll(".mean-gradient").remove();
 		},
 	}
 };