diff --git a/.flake8 b/.flake8 index ff017c45..a99b7e58 100644 --- a/.flake8 +++ b/.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 diff --git a/app/src/components/callflowEnsemble.js b/app/src/components/callflowEnsemble.js index 52644649..18300cfe 100644 --- a/app/src/components/callflowEnsemble.js +++ b/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,7 +614,7 @@ export default { this.clearLocal(); this.$socket.emit("init", { mode: this.selectedMode, - dataset: this.$store .selectedTargetDataset + dataset: this.$store.selectedTargetDataset }); this.init(); }, @@ -662,10 +622,9 @@ export default { 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() { diff --git a/app/src/components/callflowSingle.js b/app/src/components/callflowSingle.js index 4b7063e6..1367e99e 100644 --- a/app/src/components/callflowSingle.js +++ b/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, diff --git a/app/src/components/callsiteCorrespondence/box.js b/app/src/components/callsiteCorrespondence/box.js index 2007f3d2..e31aceeb 100644 --- a/app/src/components/callsiteCorrespondence/box.js +++ b/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"); + }, } }; \ No newline at end of file diff --git a/app/src/components/callsiteCorrespondence/boxplot.js b/app/src/components/callsiteCorrespondence/boxplot.js index 4560bea9..610d715c 100644 --- a/app/src/components/callsiteCorrespondence/boxplot.js +++ b/app/src/components/callsiteCorrespondence/boxplot.js @@ -62,23 +62,10 @@ export default { mounted() { this.init(); let self = this; - EventHandler.$on("show_target_auxiliary", (data) => { + EventHandler.$on("ensemble-auxiliary", (data) => { self.clear(); self.init(); }); - - EventHandler.$on("show_boxplot", (callsite) => { - let thisid = self.id.split("-")[1] + "-" + self.id.split("-")[2]; - if (callsite.id == thisid) { - console.log("Showing boxpliot of ", callsite); - self.visualize(callsite); - } - }); - - EventHandler.$on("hide_boxplot", (callsite) => { - self.clear(); - }); - }, created() { @@ -87,8 +74,31 @@ export default { methods: { init() { - this.containerHeight = 0; + this.containerHeight = 150; + this.containerWidth = this.$parent.boxplotWidth - 2 * this.padding.right - 1 * this.padding.left; + this.boxHeight = this.containerHeight - this.informationHeight; + this.boxWidth = this.containerWidth; + this.boxPosition = this.informationHeight / 2 + this.outlierHeight / 2; + this.centerLinePosition = (this.boxHeight - this.informationHeight / 4) / 2; + this.rectHeight = this.boxHeight - this.informationHeight / 4 - this.outlierHeight / 4; + + this.process(this.callsite); + + this.svg = d3.select("#boxplot-" + this.callsite.id) + .attrs({ + "width": this.containerWidth, + "height": this.containerHeight + }); + + let min_x = Math.min(this.q.min, this.targetq.min); + let max_x = Math.max(this.q.max, this.targetq.max); + + this.xScale = d3.scaleLinear() + .domain([min_x, max_x]) + .range([0.05 * this.containerWidth, this.containerWidth - 0.05 * this.containerWidth]); + + this.visualize(this.callsite); }, process(callsite) { @@ -115,39 +125,10 @@ export default { return result; }, - drawSVG(callsite) { - this.containerHeight = 150; - this.containerWidth = this.$parent.boxplotWidth - 2 * this.padding.right - 1 * this.padding.left; - this.boxHeight = this.containerHeight - this.informationHeight; - this.boxWidth = this.containerWidth; - - this.boxPosition = this.informationHeight / 2 + this.outlierHeight / 2; - this.centerLinePosition = (this.boxHeight - this.informationHeight / 4) / 2; - this.rectHeight = this.boxHeight - this.informationHeight / 4 - this.outlierHeight / 4; - - this.svg = d3.select("#boxplot-" + callsite.id) - .attrs({ - "width": this.containerWidth, - "height": this.containerHeight - }); - - let min_x = Math.min(this.q.min, this.targetq.min); - let max_x = Math.max(this.q.max, this.targetq.max); - - this.xScale = d3.scaleLinear() - .domain([min_x, max_x]) - .range([0.05 * this.containerWidth, this.containerWidth - 0.05 * this.containerWidth]); - }, - visualize(callsite) { - this.process(callsite); - this.drawSVG(callsite); - this.$refs.Box.init(callsite, this.q, this.targetq, this.xScale, this.showTarget); this.$refs.Markers.init(callsite, this.q, this.targetq, this.xScale, this.showTarget); this.$refs.Outliers.init(this.q, this.targetq, this.ensembleWhiskerIndices, this.targetWhiskerIndices, this.d, this.targetd, this.xScale, this.callsite, this.showTarget); - - }, clear() { diff --git a/app/src/components/callsiteCorrespondence/callsiteCorrespondence.js b/app/src/components/callsiteCorrespondence/callsiteCorrespondence.js index 24ce8efd..3e89ac9b 100644 --- a/app/src/components/callsiteCorrespondence/callsiteCorrespondence.js +++ b/app/src/components/callsiteCorrespondence/callsiteCorrespondence.js @@ -110,7 +110,16 @@ export default { document.getElementById(this.id).style.maxHeight = this.height + "px"; this.firstRender = false; } + this.visualize(); + }, + + visualize() { + this.setStates(); + this.boxplotByMetric(); + // this.borderColorByMetric() + }, + setStates() { this.callsites = this.$store.callsites["ensemble"]; this.targetCallsites = this.$store.callsites[this.$store.selectedTargetDataset]; @@ -138,7 +147,9 @@ export default { this.ensembleColor = this.$store.runtimeColor.textColor; this.targetColor = this.$store.runtimeColor.textColor; } + }, + boxplotByMetric(){ for (let callsite in this.callsites) { if (this.targetCallsites[callsite] != undefined) { this.targetMeans[callsite] = utils.formatRuntimeWithoutUnits(this.targetCallsites[callsite][this.$store.selectedMetric]["mean_time"]); @@ -159,8 +170,6 @@ export default { } this.selectClassName[callsite] = "unselect-callsite"; } - - // this.borderColorByMetric() }, borderColorByMetric() { diff --git a/app/src/components/callsiteCorrespondence/markers.js b/app/src/components/callsiteCorrespondence/markers.js index 2478a419..a330f61e 100644 --- a/app/src/components/callsiteCorrespondence/markers.js +++ b/app/src/components/callsiteCorrespondence/markers.js @@ -16,7 +16,7 @@ export default { textOffset: 40, fontSize: 10, topPosition: -0.2, - bottomPosition: 0.7 + bottomPosition: 0.75 }), mounted() { diff --git a/app/src/components/callsiteInformation/boxplot.js b/app/src/components/callsiteInformation/boxplot.js index 1a57301a..5de95f09 100644 --- a/app/src/components/callsiteInformation/boxplot.js +++ b/app/src/components/callsiteInformation/boxplot.js @@ -63,22 +63,10 @@ export default { this.init(); let self = this; - EventHandler.$on("show-target-auxiliary", (data) => { + EventHandler.$on("single-auxiliary", (data) => { self.clear(); self.init(); }); - - EventHandler.$on("show_mpi_boxplot", (data) => { - let thisid = self.id.split("-")[1] + "-" + self.id.split("-")[2]; - if (data.id == thisid) { - console.log("Showing boxpliot of ", data); - self.init(data); - } - }); - - EventHandler.$on("hide_mpi_boxplot", (data) => { - self.clear(data); - }); }, created() { diff --git a/app/src/components/callsiteInformation/callsiteInformation.js b/app/src/components/callsiteInformation/callsiteInformation.js index a4097f36..92e599f1 100644 --- a/app/src/components/callsiteInformation/callsiteInformation.js +++ b/app/src/components/callsiteInformation/callsiteInformation.js @@ -72,7 +72,7 @@ export default { /** * Event handler for sorting the callsites by a metric. */ - EventHandler.$on("callsite_information_sort", (data) => { + EventHandler.$on("callsite-information-sort", (data) => { let attribute = self.$store.selectedRuntimeSortBy; self.callsites = self.sortByAttribute(self.callsites, attribute); }); @@ -158,7 +158,6 @@ export default { this.stdDeviation[callsite] = utils.formatRuntimeWithoutUnits(data["std_deviation"]); this.selectClassName[callsite] = "unselect-callsite"; - EventHandler.$emit("show-mpi-boxplot", this.callsites[callsite]); } }, @@ -245,18 +244,6 @@ export default { return this.selectClassName[callsite]; }, - /** - * - * @param {*} str - * @param {*} n - * Formatting the text in view. - * TODO: move all this to utils. We should be able to - */ - trunc(str, n) { - str = str.replace(//g, "proc "); - return (str.length > n) ? str.substr(0, n - 1) + "..." : str; - }, - /** * * @param {*} module @@ -265,7 +252,7 @@ export default { if (module.length < 10) { return module; } - return this.trunc(module, 10); + return utils.truncNames(module, 10); }, /** diff --git a/app/src/components/ensembleHistogram/ensembleHistogram.js b/app/src/components/ensembleHistogram/ensembleHistogram.js index b8c49bb9..2c5ba49c 100644 --- a/app/src/components/ensembleHistogram/ensembleHistogram.js +++ b/app/src/components/ensembleHistogram/ensembleHistogram.js @@ -134,8 +134,6 @@ export default { isTargetThere = true; } - this.$refs.ToolTip.init(this.svgID); - this.rankCount = parseInt(this.$store.numOfRanks["ensemble"]); this.xScale = d3.scaleBand() @@ -168,6 +166,7 @@ export default { if (this.$store.showTarget && isTargetThere) { this.targetBars(); } + this.$refs.ToolTip.init(this.svgID); }, setTitle() { diff --git a/app/src/components/ensembleScatterplot/ensembleScatterplot.js b/app/src/components/ensembleScatterplot/ensembleScatterplot.js index e4ece83a..0518f9e6 100644 --- a/app/src/components/ensembleScatterplot/ensembleScatterplot.js +++ b/app/src/components/ensembleScatterplot/ensembleScatterplot.js @@ -69,7 +69,6 @@ export default { .attr("height", this.boxHeight - this.padding.top) .attr("transform", "translate(" + this.padding.left + "," + this.padding.top + ")"); - this.$refs.ToolTip.init(this.svgID); EventHandler.$emit("ensemble-scatterplot", { module: this.$store.selectedModule, dataset: this.$store.selectedDatasets, @@ -120,6 +119,7 @@ export default { } // this.correlationText() this.setTitle(); + this.$refs.ToolTip.init(this.svgID); }, setTitle() { @@ -540,7 +540,7 @@ export default { self.$refs.ToolTip.render(data); }) .on("mouseout", () => { - // self.$refs.ToolTip.clear() + self.$refs.ToolTip.clear(); }); } }, diff --git a/app/src/html/callflowEnsemble.html b/app/src/html/callflowEnsemble.html index 16d42538..afc9a318 100644 --- a/app/src/html/callflowEnsemble.html +++ b/app/src/html/callflowEnsemble.html @@ -115,25 +115,6 @@ refresh - - - General - - - - - - -