diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc index 4a9b710..53fb762 100644 Binary files a/__pycache__/run.cpython-37.pyc and b/__pycache__/run.cpython-37.pyc differ diff --git a/cachedir/joblib/run/randomSearch/05609dc6df4ae4898dbab381be14f176/metadata.json b/cachedir/joblib/run/randomSearch/05609dc6df4ae4898dbab381be14f176/metadata.json new file mode 100644 index 0000000..87a3b96 --- /dev/null +++ b/cachedir/joblib/run/randomSearch/05609dc6df4ae4898dbab381be14f176/metadata.json @@ -0,0 +1 @@ +{"duration": 42.55050802230835, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='kd_tree', n_neighbors=36, weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'weights': ['uniform', 'distance']}", "eachAlgor": "'KNN'", "AlgorithmsIDsEnd": "500"}} \ No newline at end of file diff --git a/cachedir/joblib/run/randomSearch/c140450f90e8f2220dc694fcbea916e8/output.pkl b/cachedir/joblib/run/randomSearch/c140450f90e8f2220dc694fcbea916e8/output.pkl new file mode 100644 index 0000000..0e14cfd Binary files /dev/null and b/cachedir/joblib/run/randomSearch/c140450f90e8f2220dc694fcbea916e8/output.pkl differ diff --git a/frontend/src/components/AlgorithmsController.vue b/frontend/src/components/AlgorithmsController.vue index 2be6516..0300122 100644 --- a/frontend/src/components/AlgorithmsController.vue +++ b/frontend/src/components/AlgorithmsController.vue @@ -11,35 +11,111 @@ export default { data () { return { WH: [], - ResultsLocal: [], + PerF: [], + PerFCM: [], + storedEnsem: [], + storedCM: [], + selectedSimple: [], + selectedEnsem: [] } }, methods: { reset () { var svg = d3.select("#Bees"); svg.selectAll("*").remove(); + this.PerF = [] + this.PerFCM = [] + this.storedEnsem = [] + this.storedCM = [] + this.selectedSimple = [] + this.selectedEnsem = [] }, BeesFun () { var svg = d3.select("#Bees"); svg.selectAll("*").remove(); var chart1 var data = [] - for (let i=0; i<500; i++){ - if (i<100) { - data.push({Algorithm:"KNN",value:randomIntFromInterval(40,100), size:(Math.floor(Math.random() * 4) + 4)}) - } else if (i<200){ - data.push({Algorithm:"LR",value:randomIntFromInterval(50,100), size:(Math.floor(Math.random() * 4) + 4)}) - } else if (i<300){ - data.push({Algorithm:"MLP",value:randomIntFromInterval(30,100), size:(Math.floor(Math.random() * 4) + 4)}) - } else if (i<400){ - data.push({Algorithm:"RF",value:randomIntFromInterval(10,100), size:(Math.floor(Math.random() * 4) + 4)}) - } else { - data.push({Algorithm:"GradB",value:randomIntFromInterval(0,100), size:(Math.floor(Math.random() * 4) + 4)}) - } + + for (let i=0; i cGroup.metrics.upperInnerFence) { - if (cOut.value > cGroup.metrics.upperOuterFence) { - cExtremes.push(cOut); - } else { - cOutliers.push(cOut); - } - } - } - cGroup.boxPlot.objs.outliers = cOutliers; - cGroup.boxPlot.objs.extremes = cExtremes; - } - - for (var cName in chart.groupObjs) { - calcOutliers(chart.groupObjs[cName]); - } - }(); - - /** - * Take updated options and redraw the box plot - * @param updateOptions - */ - chart.boxPlots.change = function (updateOptions) { - if (updateOptions) { - for (var key in updateOptions) { - bOpts[key] = updateOptions[key] - } - } - - for (var cName in chart.groupObjs) { - chart.groupObjs[cName].boxPlot.objs.g.remove() - } - chart.boxPlots.prepareBoxPlot(); - chart.boxPlots.update() - }; - - chart.boxPlots.reset = function () { - chart.boxPlots.change(defaultOptions) - }; - chart.boxPlots.show = function (opts) { - if (opts !== undefined) { - opts.show = true; - if (opts.reset) { - chart.boxPlots.reset() - } - } else { - opts = {show: true}; - } - chart.boxPlots.change(opts) - - }; - chart.boxPlots.hide = function (opts) { - if (opts !== undefined) { - opts.show = false; - if (opts.reset) { - chart.boxPlots.reset() - } - } else { - opts = {show: false}; - } - chart.boxPlots.change(opts) - }; - - /** - * Update the box plot obj values - */ - chart.boxPlots.update = function () { - var cName, cBoxPlot; - - for (cName in chart.groupObjs) { - cBoxPlot = chart.groupObjs[cName].boxPlot; - - // Get the box width - var objBounds = getObjWidth(bOpts.boxWidth, cName); - var width = (objBounds.right - objBounds.left); - - var sMetrics = {}; //temp var for scaled (plottable) metric values - for (var attr in chart.groupObjs[cName].metrics) { - sMetrics[attr] = null; - sMetrics[attr] = chart.yScale(chart.groupObjs[cName].metrics[attr]); - } - - // Box - if (cBoxPlot.objs.box) { - cBoxPlot.objs.box - .attr("x", objBounds.left) - .attr('width', width) - .attr("y", sMetrics.quartile3) - .attr("rx", 1) - .attr("ry", 1) - .attr("height", -sMetrics.quartile3 + sMetrics.quartile1) - } - - // Lines - var lineBounds = null; - if (bOpts.lineWidth) { - lineBounds = getObjWidth(bOpts.lineWidth, cName) - } else { - lineBounds = objBounds - } - // --Whiskers - if (cBoxPlot.objs.upperWhisker) { - cBoxPlot.objs.upperWhisker.fence - .attr("x1", lineBounds.left) - .attr("x2", lineBounds.right) - .attr('y1', sMetrics.upperInnerFence) - .attr("y2", sMetrics.upperInnerFence); - cBoxPlot.objs.upperWhisker.line - .attr("x1", lineBounds.middle) - .attr("x2", lineBounds.middle) - .attr('y1', sMetrics.quartile3) - .attr("y2", sMetrics.upperInnerFence); - - cBoxPlot.objs.lowerWhisker.fence - .attr("x1", lineBounds.left) - .attr("x2", lineBounds.right) - .attr('y1', sMetrics.lowerInnerFence) - .attr("y2", sMetrics.lowerInnerFence); - cBoxPlot.objs.lowerWhisker.line - .attr("x1", lineBounds.middle) - .attr("x2", lineBounds.middle) - .attr('y1', sMetrics.quartile1) - .attr("y2", sMetrics.lowerInnerFence); - } - - // --Median - if (cBoxPlot.objs.median) { - cBoxPlot.objs.median.line - .attr("x1", lineBounds.left) - .attr("x2", lineBounds.right) - .attr('y1', sMetrics.median) - .attr("y2", sMetrics.median); - cBoxPlot.objs.median.circle - .attr("cx", lineBounds.middle) - .attr("cy", sMetrics.median) - } - - // --Mean - if (cBoxPlot.objs.mean) { - cBoxPlot.objs.mean.line - .attr("x1", lineBounds.left) - .attr("x2", lineBounds.right) - .attr('y1', sMetrics.mean) - .attr("y2", sMetrics.mean); - cBoxPlot.objs.mean.circle - .attr("cx", lineBounds.middle) - .attr("cy", sMetrics.mean); - } - - // Outliers - - var pt; - if (cBoxPlot.objs.outliers) { - for (pt in cBoxPlot.objs.outliers) { - cBoxPlot.objs.outliers[pt].point - .attr("cx", objBounds.middle + addJitter(bOpts.scatterOutliers, width)) - .attr("cy", chart.yScale(cBoxPlot.objs.outliers[pt].value)); - } - } - if (cBoxPlot.objs.extremes) { - for (pt in cBoxPlot.objs.extremes) { - cBoxPlot.objs.extremes[pt].point - .attr("cx", objBounds.middle + addJitter(bOpts.scatterOutliers, width)) - .attr("cy", chart.yScale(cBoxPlot.objs.extremes[pt].value)); - } - } - } - }; - - /** - * Create the svg elements for the box plot - */ - chart.boxPlots.prepareBoxPlot = function () { - var cName, cBoxPlot; - - if (bOpts.colors) { - chart.boxPlots.colorFunct = getColorFunct(bOpts.colors); - } else { - chart.boxPlots.colorFunct = chart.colorFunct - } - - if (bOpts.show == false) { - return - } - - for (cName in chart.groupObjs) { - cBoxPlot = chart.groupObjs[cName].boxPlot; - - cBoxPlot.objs.g = chart.groupObjs[cName].g.append("g").attr("class", "box-plot"); - - //Plot Box (default show) - if (bOpts.showBox) { - cBoxPlot.objs.box = cBoxPlot.objs.g.append("rect") - .attr("class", "box") - .style("fill", chart.boxPlots.colorFunct(cName)) - .style("stroke", chart.boxPlots.colorFunct(cName)); - //A stroke is added to the box with the group color, it is - // hidden by default and can be shown through css with stroke-width - } - - //Plot Median (default show) - if (bOpts.showMedian) { - cBoxPlot.objs.median = {line: null, circle: null}; - cBoxPlot.objs.median.line = cBoxPlot.objs.g.append("line") - .attr("class", "median"); - cBoxPlot.objs.median.circle = cBoxPlot.objs.g.append("circle") - .attr("class", "median") - .attr('r', bOpts.medianCSize) - .style("fill", chart.boxPlots.colorFunct(cName)); - } - - // Plot Mean (default no plot) - if (bOpts.showMean) { - cBoxPlot.objs.mean = {line: null, circle: null}; - cBoxPlot.objs.mean.line = cBoxPlot.objs.g.append("line") - .attr("class", "mean"); - cBoxPlot.objs.mean.circle = cBoxPlot.objs.g.append("circle") - .attr("class", "mean") - .attr('r', bOpts.medianCSize) - .style("fill", chart.boxPlots.colorFunct(cName)); - } - - // Plot Whiskers (default show) - if (bOpts.showWhiskers) { - cBoxPlot.objs.upperWhisker = {fence: null, line: null}; - cBoxPlot.objs.lowerWhisker = {fence: null, line: null}; - cBoxPlot.objs.upperWhisker.fence = cBoxPlot.objs.g.append("line") - .attr("class", "upper whisker") - .style("stroke", chart.boxPlots.colorFunct(cName)); - cBoxPlot.objs.upperWhisker.line = cBoxPlot.objs.g.append("line") - .attr("class", "upper whisker") - .style("stroke", chart.boxPlots.colorFunct(cName)); - - cBoxPlot.objs.lowerWhisker.fence = cBoxPlot.objs.g.append("line") - .attr("class", "lower whisker") - .style("stroke", chart.boxPlots.colorFunct(cName)); - cBoxPlot.objs.lowerWhisker.line = cBoxPlot.objs.g.append("line") - .attr("class", "lower whisker") - .style("stroke", chart.boxPlots.colorFunct(cName)); - } - - // Plot outliers (default show) - if (bOpts.showOutliers) { - if (!cBoxPlot.objs.outliers) calcAllOutliers(); - var pt; - if (cBoxPlot.objs.outliers.length) { - var outDiv = cBoxPlot.objs.g.append("g").attr("class", "boxplot outliers"); - for (pt in cBoxPlot.objs.outliers) { - cBoxPlot.objs.outliers[pt].point = outDiv.append("circle") - .attr("class", "outlier") - .attr('r', bOpts.outlierCSize) - .style("fill", chart.boxPlots.colorFunct(cName)); - } - } - - if (cBoxPlot.objs.extremes.length) { - var extDiv = cBoxPlot.objs.g.append("g").attr("class", "boxplot extremes"); - for (pt in cBoxPlot.objs.extremes) { - cBoxPlot.objs.extremes[pt].point = extDiv.append("circle") - .attr("class", "extreme") - .attr('r', bOpts.outlierCSize) - .style("stroke", chart.boxPlots.colorFunct(cName)); - } - } - } - - - } - }; - chart.boxPlots.prepareBoxPlot(); - - d3.select(window).on('resize.' + chart.selector + '.boxPlot', chart.boxPlots.update); - chart.boxPlots.update(); - return chart; - - }; - /** * Render a notched box on the current chart * @param options @@ -1443,8 +1171,8 @@ export default { .range([Math.floor(chart.yScale.range()[0] / dOpts.pointSize), 0]) .interpolate(d3.interpolateRound) .domain(chart.yScale.domain()); - var maxWidth = Math.floor(chart.xScale.rangeBand() / dOpts.pointSize); - + var maxWidth = Math.ceil(chart.xScale.rangeBand() / dOpts.pointSize); + var ptsObj = {}; var cYBucket = null; // Bucket points @@ -1560,23 +1288,18 @@ export default { for (var pt = 0; pt < chart.groupObjs[cName].values.length; pt++) { cPlot.objs.points.pts.push(cPlot.objs.points.g.append("circle") .attr("class", "point") - .attr('r', function () { return chart.data[pt].size / 2; })// Options is diameter, r takes radius so divide by 2 - .style("fill", chart.dataPlots.colorFunct(cName))); + .attr('r', function () { + var dataLoc = data.filter( i => cName.includes( i.Algorithm ) ); + return dataLoc[pt].size; + }) // Options is diameter, r takes radius so divide by 2 + .style("fill", function () { + var dataLoc = data.filter( i => cName.includes( i.Algorithm ) ); + if (dataLoc[pt].sw) { return "#000000" } + else { return chart.dataPlots.colorFunct(cName) } + })); } } - - // Bean lines - if (dOpts.showBeanLines) { - cPlot.objs.bean = {g: null, lines: []}; - cPlot.objs.bean.g = cPlot.objs.g.append("g").attr("class", "bean-plot"); - for (var pt = 0; pt < chart.groupObjs[cName].values.length; pt++) { - cPlot.objs.bean.lines.push(cPlot.objs.bean.g.append("line") - .attr("class", "bean line") - .style("stroke-width", '1') - .style("stroke", chart.dataPlots.colorFunct(cName))); - } - } } }; @@ -1592,7 +1315,19 @@ export default { } }, mounted () { - EventBus.$on('callAlgorithhms', data => { this.ResultsLocal = data }) + EventBus.$on('SendSelectedPointsUpdateIndicator', data => { this.selectedSimple = data }) + EventBus.$on('SendSelectedPointsUpdateIndicatorCM', data => { this.selectedEnsem = data }) + EventBus.$on('SendSelectedPointsUpdateIndicator', this.BeesFun) + EventBus.$on('SendSelectedPointsUpdateIndicatorCM', this.BeesFun) + + EventBus.$on('SendStoredIDsInitial', data => { this.storedCM = data }) + EventBus.$on('SendPerformanceInitialAlgs', data => { + this.PerFCM = data}) + + EventBus.$on('SendPerformance', data => { + this.PerF = data}) + EventBus.$on('SendStoredEnsembleHist', data => { this.storedEnsem = data }) + EventBus.$on('callAlgorithhms', this.BeesFun) EventBus.$on('Responsive', data => { @@ -1670,12 +1405,6 @@ export default { fill: white !important; } -.chart-wrapper .box-plot .mean { - stroke: white; - stroke-dasharray: 2,1; - stroke-width: 1px; -} - @media (max-width:500px){ .chart-wrapper .box-plot circle {display: none;} } @@ -1687,17 +1416,6 @@ export default { opacity: 0.4; } -.chart-wrapper .violin-plot .line { - fill: none; - stroke-width: 2px; - shape-rendering: geometricPrecision; -} - -/*Notch Plot*/ -.chart-wrapper .notch-plot .notch { - fill-opacity: 0.4; - stroke-width: 2; -} .axis text { font-size: 16px !important; diff --git a/frontend/src/components/Ensemble.vue b/frontend/src/components/Ensemble.vue index 48eddb4..325b169 100644 --- a/frontend/src/components/Ensemble.vue +++ b/frontend/src/components/Ensemble.vue @@ -120,6 +120,8 @@ export default { } } + EventBus.$emit('ExtractResults', classifiersInfoProcessing) + var DataGeneral, maxX, minX, maxY, minY, layout var width = this.WH[0]*6.5 // interactive visualization diff --git a/frontend/src/components/Export.vue b/frontend/src/components/Export.vue new file mode 100644 index 0000000..a648344 --- /dev/null +++ b/frontend/src/components/Export.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/History.vue b/frontend/src/components/History.vue index bff3199..af60957 100644 --- a/frontend/src/components/History.vue +++ b/frontend/src/components/History.vue @@ -19,7 +19,6 @@ export default { return { WH: [], RandomSearLoc : 100, - SendIDLocs: [], PerF: [], PerFCM: [], storedEnsem: [], @@ -28,17 +27,19 @@ export default { values: [0,0,0,0,0,0,50,50,50,50,50,0,50,50,50,50,50,0], valuesStage2: [0,0,0,0,0,0,50,50,50,50,50,0,50,50,50,50,50,0,25,25,25,25,25,0,25,25,25,25,25,0,25,25,25,25,25,0,25,25,25,25,25,0], loop: 0, - storePreviousPercentage: [] + storePreviousPercentage: [], + classesNumber: 9, } }, methods: { reset () { var svg = d3.select("#SankeyInter"); svg.selectAll("*").remove(); + var svgLeg = d3.select("#LegendSankey"); + svgLeg.selectAll("*").remove(); }, computePerformanceDiffS () { var colorsforScatterPlot = this.PerF - console.log(this.storedCM) var mergedStoreEnsembleLoc = [].concat.apply([], this.storedEnsem) var mergedStoreEnsembleLocFormatted = [] for (let i = 0; i < mergedStoreEnsembleLoc.length; i++) { @@ -248,8 +249,6 @@ export default { } } } - console.log(countMax) - console.log(countMin) var percentage = [] for (let j = 0; j < countMax.length; j++) { @@ -327,7 +326,7 @@ export default { {month:"Mutate_S2_Prime",value:125,loss:null}]; //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels) var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var : - width = 1200 - margin.left - margin.right, + width = 1250 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; var svg = d3.select("#SankeyInter"); @@ -498,6 +497,7 @@ export default { var percentage = this.percentageOverall console.log(percentage) var previousPercentage = this.storePreviousPercentage + console.log(previousPercentage) // add in the links var link = svg.append("g").selectAll(".link") .data(graph.links) @@ -874,7 +874,7 @@ export default { {month:"Mutate_S2_Prime",value:125,loss:null}]; //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels) var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var : - width = 1200 - margin.left - margin.right, + width = 1230 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; var svg = d3.select("#SankeyInter"); @@ -1244,7 +1244,7 @@ export default { {month:"Mutate_S1",value:250,loss:null}]; //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels) var margin = {top: 10, right: 40, bottom: 10, left: 40}, //comma is the equivalent of var : - width = 1200 - margin.left - margin.right, + width = 1230 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; var svg = d3.select("#SankeyInter"); @@ -1519,8 +1519,74 @@ export default { // "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")"); }, + // LegendStable() { + // var viewerWidth = this.responsiveWidthHeight[0]*7 + // var viewerHeight = this.responsiveWidthHeight[1]*1.6 + // var viewerPosTop = viewerWidth * 0.01; + // var cellSizeHeat = 20 + // var legendElementWidth = cellSizeHeat * 3; + + // // http://bl.ocks.org/mbostock/5577023 + // var colors = colorbrewer.PRGn[this.classesNumber]; + // var svgLeg = d3.select("#LegendHeat"); + // svgLeg.selectAll("*").remove(); + + // var svgLeg = d3.select("#LegendHeat").append("svg") + // .attr("width", viewerWidth/2) + // .attr("height", viewerHeight*0.10) + // .style("margin-top", "12px") + + // var legend = svgLeg.append('g') + // .attr("class", "legend") + // .attr("transform", "translate(0,0)") + // .selectAll(".legendElement") + // .data([1.00, 0.75, 0.50, 0.25, 0.00, 0.25, 0.50, 0.75, 1.00]) + // .enter().append("g") + // .attr("class", "legendElement"); + + // legend.append("svg:rect") + // .attr("x", viewerPosTop) + // .attr("y", function(d, i) { + // return (legendElementWidth * i) + 35; + // }) + // .attr("class", "cellLegend bordered") + // .attr("width", legendElementWidth) + // .attr("height", cellSizeHeat / 2) + // .style("fill", function(d, i) { + // console.log(colors[i]) + // return colors[i]; + // }); + + // legend.append("text") + // .attr("class", "mono legendElement") + // .text(function(d, i) { + // console.log(i) + // if (i < 4) { + // return "-" + (d * 100) + "%"; + // } else if (i > 4) { + // return "+" + (d * 100) + "%"; + // } else { + // return "" + (d * 100) + "%"; + // } + + // }) + // .attr("x", function(d, i) { + // if (i > 4) { + // return (legendElementWidth * i) + 45; + // } else if (i == 4) { + // return (legendElementWidth * i) + 55; + // } else { + // return (legendElementWidth * i) + 40; + // } + + // }) + // .attr("y", (viewerPosTop + cellSizeHeat) + 5); + + // svgLeg.append("text").attr("x", 220).attr("y", 32).text("Difference in PD (solution space vs. ensemble").style("font-size", "16px").attr("alignment-baseline","top").attr('transform', 'translate(0,10) rotate(90)') + // } }, mounted() { + //EventBus.$on('emittedEventCallingSankeyLegend', this.LegendStable) EventBus.$on('emittedEventCallingSankeyStage2', this.SankeyViewStage2) EventBus.$on('emittedEventCallingSankeyStage3', this.SankeyViewStage3) @@ -1540,8 +1606,6 @@ export default { EventBus.$on('ResponsiveandChange', data => { this.WH = data}) - EventBus.$on('SendIDs', data => { - this.SendIDLocs = data}) EventBus.$on('SendPerformance', data => { this.PerF = data}) EventBus.$on('SendPerformanceCM', data => { diff --git a/frontend/src/components/HyperParameterSpace.vue b/frontend/src/components/HyperParameterSpace.vue index 60e25b0..f206ebf 100644 --- a/frontend/src/components/HyperParameterSpace.vue +++ b/frontend/src/components/HyperParameterSpace.vue @@ -14,7 +14,7 @@ {{ CrossoverMutateText }} - + + + + @@ -193,6 +211,8 @@ import ValidationController from './ValidationController.vue' import HyperParameterSpace from './HyperParameterSpace.vue' import GlobalParamController from './GlobalParamController' import Ensemble from './Ensemble.vue' +import Knowledge from './Knowledge.vue' +import Export from './Export.vue' import VotingResults from './VotingResults.vue' import History from './History.vue' import Predictions from './Predictions.vue' @@ -202,7 +222,6 @@ import 'axios-progress-bar/dist/nprogress.css' import 'bootstrap-css-only/css/bootstrap.min.css' import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue' import { EventBus } from '../main.js' -import * as jQuery from 'jquery' import $ from 'jquery' import * as d3Base from 'd3' import Papa from 'papaparse' @@ -220,6 +239,8 @@ export default Vue.extend({ HyperParameterSpace, GlobalParamController, Ensemble, + Knowledge, + Export, Predictions, VotingResults, History, @@ -230,6 +251,7 @@ export default Vue.extend({ }, data () { return { + valuePickled: 'Close', sankeyCallS: true, CMNumberofModelsOFFICIAL: [0,0,0,0,0,0,50,50,50,50,50,0,50,50,50,50,50,0], CMNumberofModels: [0,0,0,0,0,0,5,5,5,5,5,0,5,5,5,5,5,0], // Remove that! @@ -342,19 +364,25 @@ export default Vue.extend({ this.OverviewResults = response.data.OverviewResults console.log('Server successfully sent all the data related to visualizations!') if (this.firstTimeExec) { + + var ModelsLocalInitial = JSON.parse(this.OverviewResults[0]) + EventBus.$emit('SendStoredIDsInitial', ModelsLocalInitial) + var PerformanceInitial = JSON.parse(this.OverviewResults[1]) + EventBus.$emit('SendPerformanceInitialAlgs', PerformanceInitial) + EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults) EventBus.$emit('emittedEventCallingSankey') - EventBus.$emit('callAlgorithhms', this.OverviewResults) - EventBus.$emit('callValidation', this.OverviewResults) + //EventBus.$emit('emittedEventCallingSankeyLegend') + EventBus.$emit('callAlgorithhms') + EventBus.$emit('callValidationData', this.OverviewResults) + EventBus.$emit('callValidation') EventBus.$emit('emittedEventCallingGrid', this.OverviewResults) EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults) EventBus.$emit('LegendPredict') this.storeBothEnsCM[0] = this.OverviewResults this.firstTimeExec = false } else { - var IDsLocal = JSON.parse(this.OverviewResults[0]) var Performance = JSON.parse(this.OverviewResults[1]) - EventBus.$emit('SendIDs', IDsLocal) EventBus.$emit('SendStoredEnsembleHist', this.storeEnsemble) EventBus.$emit('SendStoredEnsemble', this.storeEnsemble) EventBus.$emit('SendPerformance', Performance) @@ -374,7 +402,11 @@ export default Vue.extend({ this.storeBothEnsCM[1] = this.OverviewResults //EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults) EventBus.$emit('emittedEventCallingInfo', this.OverviewResults) + EventBus.$emit('callAlgorithhms') + EventBus.$emit('emittedEventCallingGrid', this.OverviewResults) this.getFinalResults() + EventBus.$emit('callValidationData', this.OverviewResults) + EventBus.$emit('callValidation') } }) .catch(error => { @@ -397,11 +429,15 @@ export default Vue.extend({ this.OverviewResultsCM = response.data.OverviewResultsCM var ModelsLocal = JSON.parse(this.OverviewResultsCM[0]) EventBus.$emit('SendStoredCMHist', ModelsLocal) + EventBus.$emit('SendStoredIDsInitial', ModelsLocal) var PerformanceCM = JSON.parse(this.OverviewResultsCM[1]) EventBus.$emit('SendPerformanceCM', PerformanceCM) + EventBus.$emit('SendPerformanceInitialAlgs', PerformanceCM) console.log('Server successfully sent all the data related to visualizations for CM!') EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResultsCM) this.storeBothEnsCM[0] = this.OverviewResultsCM + EventBus.$emit('callAlgorithhms') + EventBus.$emit('callValidationData', this.OverviewResultsCM) //EventBus.$emit('emittedEventCallingSankey', this.OverviewResultsCM) //this.PredictSel = [] //EventBus.$emit('emittedEventCallingGrid', this.OverviewResultsCM) @@ -973,10 +1009,12 @@ export default Vue.extend({ changeActiveTo1 () { this.projectionID_A = 1 this.projectionID_B = 1 + EventBus.$emit('activeNow', 1) }, changeActiveTo2 () { this.projectionID_A = 2 this.projectionID_B = 2 + EventBus.$emit('activeNow', 2) } }, created () { @@ -1095,6 +1133,8 @@ export default Vue.extend({ EventBus.$on('changeValues', data => { this.CMNumberofModelsOFFICIAL = data }) EventBus.$on('changeValues2', data => { this.CMNumberofModelsOFFICIALS2 = data }) + EventBus.$on('OpenModal', this.openModalFun) + //Prevent double click to search for a word. document.addEventListener('mousedown', function (event) { if (event.detail > 1) { diff --git a/frontend/src/components/Predictions.vue b/frontend/src/components/Predictions.vue index f4fcb87..5b451c4 100644 --- a/frontend/src/components/Predictions.vue +++ b/frontend/src/components/Predictions.vue @@ -166,7 +166,7 @@ export default { // === Set up canvas === // var width = 1200, - height = 85; + height = 77; var colourScale; @@ -183,7 +183,7 @@ export default { var custom = d3.select(customBase); // this is our svg replacement // settings for a grid with 40 cells in a row and 2x5 cells in a group - var groupSpacing = 40; + var groupSpacing = 42; var cellSpacing = 2; var cellSize = Math.floor((width - 1 * groupSpacing) / (13 * sqrtSize)) - cellSpacing; @@ -410,7 +410,7 @@ export default { // === Set up canvas === // var width = 1200, - height = 85; + height = 77; var colourScale; @@ -427,7 +427,7 @@ export default { var custom = d3.select(customBase); // this is our svg replacement // settings for a grid with 40 cells in a row and 2x5 cells in a group - var groupSpacing = 40; + var groupSpacing = 42; var cellSpacing = 2; var cellSize = Math.floor((width - 1 * groupSpacing) / (13 * sqrtSize)) - cellSpacing; @@ -531,7 +531,7 @@ export default { var svgLeg = d3.select("#LegendHeat").append("svg") .attr("width", viewerWidth/2) .attr("height", viewerHeight*0.10) - .style("margin-top", "12px") + .style("margin-top", "28px") var legend = svgLeg.append('g') .attr("class", "legend") @@ -550,14 +550,12 @@ export default { .attr("width", legendElementWidth) .attr("height", cellSizeHeat / 2) .style("fill", function(d, i) { - console.log(colors[i]) return colors[i]; }); legend.append("text") .attr("class", "mono legendElement") .text(function(d, i) { - console.log(i) if (i < 4) { return "-" + (d * 100) + "%"; } else if (i > 4) { @@ -579,7 +577,7 @@ export default { }) .attr("y", (viewerPosTop + cellSizeHeat) + 5); - svgLeg.append("text").attr("x", 220).attr("y", 32).text("Difference in predictive power").style("font-size", "16px").attr("alignment-baseline","top") + svgLeg.append("text").attr("x", 220).attr("y", 30).text("Difference in predictive power").style("font-size", "16px").attr("alignment-baseline","top") }, }, mounted () { diff --git a/frontend/src/components/ValidationController.vue b/frontend/src/components/ValidationController.vue index 2a72b6e..4fca1c4 100644 --- a/frontend/src/components/ValidationController.vue +++ b/frontend/src/components/ValidationController.vue @@ -11,50 +11,134 @@ export default { data () { return { WH: [], - ResultsValid: [], + ResultsValid: '', + factorsValid: [1, 1, 1, 1, 0, 0, 0, 0], + activeCurr: 1, + Metrics: ['Accuracy', 'Precision', 'Recall', 'F1-score', 'G-mean', 'ROC AUC', 'Log loss', 'MCC'], + selectedSimple: [], + selectedEnsem: [], + storedEnsemble: [] } }, methods: { reset () { var svg = d3.select("#violin"); svg.selectAll("*").remove(); + this.selectedSimple = [] + this.selectedEnsem = [] + this.storedEnsemble = [] + this.activeCurr = 1 + this.ResultsValid = '' }, ViolinFun () { var svg = d3.select("#violin"); svg.selectAll("*").remove(); var chart2 + var IDs = JSON.parse(this.ResultsValid[0]) + var valid = JSON.parse(this.ResultsValid[3]) var data = [] - for (let i=0; i<400; i++){ - if (i < 100){ - data.push({Algorithm:"Accuracy",value:randomIntFromInterval(10,60), category:"#ff7f00"}) - data.push({Algorithm:"Accuracy",value:randomIntFromInterval(10,30), category:"#fdbf6f"}) - data.push({Algorithm:"Accuracy",value:randomIntFromInterval(15,25), category:"#fb9a99"}) - data.push({Algorithm:"Accuracy",value:randomIntFromInterval(35,45), category:"#b15928"}) - data.push({Algorithm:"Accuracy",value:randomIntFromInterval(55,70), category:"#a6cee3"}) - } else if (i < 200){ - data.push({Algorithm:"Precision",value:randomIntFromInterval(10,60), category:"#ff7f00"}) - data.push({Algorithm:"Precision",value:randomIntFromInterval(40,70), category:"#fdbf6f"}) - data.push({Algorithm:"Precision",value:randomIntFromInterval(60,100), category:"#fb9a99"}) - data.push({Algorithm:"Precision",value:randomIntFromInterval(60,79), category:"#b15928"}) - data.push({Algorithm:"Precision",value:randomIntFromInterval(40,45), category:"#a6cee3"}) - } else if (i < 300){ - data.push({Algorithm:"Recall",value:randomIntFromInterval(30,40), category:"#ff7f00"}) - data.push({Algorithm:"Recall",value:randomIntFromInterval(30,40), category:"#fdbf6f"}) - data.push({Algorithm:"Recall",value:randomIntFromInterval(12,30), category:"#fb9a99"}) - data.push({Algorithm:"Recall",value:randomIntFromInterval(30,40), category:"#b15928"}) - data.push({Algorithm:"Recall",value:randomIntFromInterval(30,70), category:"#a6cee3"}) - } else { - data.push({Algorithm:"F1-score",value:randomIntFromInterval(20,80), category:"#ff7f00"}) - data.push({Algorithm:"F1-score",value:randomIntFromInterval(30,40), category:"#fdbf6f"}) - data.push({Algorithm:"F1-score",value:randomIntFromInterval(50,70), category:"#fb9a99"}) - data.push({Algorithm:"F1-score",value:randomIntFromInterval(60,70), category:"#b15928"}) - data.push({Algorithm:"F1-score",value:randomIntFromInterval(80,100), category:"#a6cee3"}) + var colorsGlobal = [] + var colorsGlobalBins = [] + var countFactors = 0 + var activeLines = [] + + for (let j=0; j