fix stack provenance

frontend/src/components/BalancePredictions.vue

@@ -92,7 +92,7 @@
             var histogram = d3.histogram()
                 .value(function(d) { return +d.value; })   // I need to give the vector of value
                 .domain(x.domain())  // then the domain of the graphic
-                .thresholds(x.ticks(10)); // then the numbers of bins
+                .thresholds(x.ticks(20)); // then the numbers of bins
 
             // And apply twice this function to data to get the bins.
             var bins1 = histogram(data.filter( function(d){return d.type === "variable 1"} ));
@@ -190,8 +190,9 @@
             svg.append("circle").attr("cx", 215).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#000")
             svg.append("circle").attr("cx", 785).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#D3D3D3")
             svg.append("text").attr("x", 230).attr("y", heightforText).text("Entire Distribution").style("font-size", "15px").attr("alignment-baseline","middle")
-            svg.append("text").attr("x", 515).attr("y", heightforText-10).text("Performance").style("font-size", "15px").attr("alignment-baseline","top")
+            svg.append("text").attr("x", 515).attr("y", heightforText-10).text("# Performance (%) #").style("font-size", "15px").attr("alignment-baseline","top")
             svg.append("text").attr("x", 800).attr("y", heightforText).text("Selected Points").style("font-size", "15px").attr("alignment-baseline","middle")
+            svg.append("text").attr("transform", "rotate(-90)").attr("x", -89).attr("y", -45).style("text-anchor", "middle").text("Number of Models"); 
 
             // Function to compute density
             function kernelDensityEstimator(kernel, X) {

frontend/src/components/Heatmap.vue

@@ -54,11 +54,11 @@ export default {
       var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; }))
       var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; }))
       let len = Features.length
-      let indicesYAxis = new Array(len)
+      let indicesYAxis = []
       for (let i = 0; i < len; i++) {
           indicesYAxis[i] = [Features[i]]
       } 
-      let indicesXAxis = new Array(len)
+      let indicesXAxis = []
       var temp = []
       for (let i = 0; i < len2; i++) {
         temp = []
@@ -68,10 +68,9 @@ export default {
       }
 
       if (this.ModelsIDHeatStack.length != 0) {
-
           var FeaturesAccuracyNew = []
           var PermImpEliNew = []
-          indicesXAxis = new Array(len)
+          indicesXAxis = []
 
           for (let i = 0; i < modelIds.length; i++) {
               if (this.ModelsIDHeatStack.includes(modelIds[i])) {

frontend/src/components/Main.vue

@@ -232,6 +232,7 @@ export default Vue.extend({
       OverviewResults: 0,
       preDataResults: '',
       DataResults: '',
+      keyNow: 1,
       instancesImportance: '',
       RetrieveValueFile: 'DiabetesC', // this is for the default data set
       ClassifierIDsList: '',
@@ -398,9 +399,9 @@ export default Vue.extend({
         EventBus.$emit('resetViews')
       } else {
         const path = `http://127.0.0.1:5000/data/ServerRequestSelPoin`
-      
         const postData = {
-          ClassifiersList: this.ClassifierIDsList
+          ClassifiersList: this.ClassifierIDsList,
+          keyNow: this.keyNow,
         }
         const axiosConfig = {
           headers: {
@@ -414,9 +415,13 @@ export default Vue.extend({
           .then(response => {
             console.log('Sent the selected points to the server (scatterplot)!')
             this.OverSelLength = this.ClassifierIDsList.length
-            EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
+            this.OverAllLength = this.ClassifierIDsList.length
             this.getSelectedModelsMetrics()
             this.getFinalResults()
+            if (this.keyNow == 0) {
+              EventBus.$emit('GrayOutPoints', '')
+              EventBus.$emit('newPointsStack', this.OverviewResults)
+            }
           })
           .catch(error => {
             console.log(error)
@@ -440,8 +445,8 @@ export default Vue.extend({
       axios.post(path, postData, axiosConfig)
       .then(response => {
       console.log('Sent the selected points to the server (scatterplot)!')
-      EventBus.$emit('GrayOutPoints', this.ClassifierIDsList)
       this.updatePredictionsSpace()
+      EventBus.$emit('GrayOutPoints', this.ClassifierIDsList)
       this.getFinalResults()
       })
       .catch(error => {
@@ -463,8 +468,11 @@ export default Vue.extend({
         .then(response => {
           this.UpdatePredictions = response.data.UpdatePredictions
           console.log('Updating Predictions Space!')
-          EventBus.$emit('updatePredictionsSpace', this.UpdatePredictions)
+          if (this.keyNow == 1) {
+            console.log('mpike')
             EventBus.$emit('InitializeProvenance', this.UpdatePredictions)
+          }
+          EventBus.$emit('updatePredictionsSpace', this.UpdatePredictions)
         })
         .catch(error => {
           console.log(error)
@@ -558,6 +566,7 @@ export default Vue.extend({
       axios.get(path, axiosConfig)
         .then(response => {
           this.FinalResults = response.data.FinalResults
+          console.log(this.FinalResults)
           EventBus.$emit('emittedEventCallingLinePlot', this.FinalResults)
         })
         .catch(error => {
@@ -966,8 +975,11 @@ export default Vue.extend({
     EventBus.$on('reset', this.Reset)
     EventBus.$on('ReturningAlgorithms', data => { this.selectedAlgorithms = data })
     EventBus.$on('ReturningBrushedPointsParams', data => { this.parametersofModels = data; })
+
+    EventBus.$on('ChangeKey', data => { this.keyNow = data })
     EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data })
     EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer)
+
     EventBus.$on('SendSelectedDataPointsToServerEvent', data => { this.DataPointsSel = data })
     EventBus.$on('SendSelectedDataPointsToServerEvent', this.SendSelectedDataPointsToServer)
     EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })

frontend/src/components/PerMetricBarChart.vue

@@ -153,7 +153,7 @@ export default {
               Plotly.restyle(boxPlot, 'x', [['Accuracy','MAE','RMSE','G-Mean','G-Mean','G-Mean','Precision','Precision','Precision','Recall','Recall','Recall','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','F-Beta Sc','MCC','ROC AUC','<b>Log Loss</b>']]);
               index = 9
             }
-            EventBus.$emit('updateMetricsScatter', resultsColors[index])
+            //EventBus.$emit('updateMetricsScatter', resultsColors[index])
           });
       },
       reset () {

frontend/src/components/Provenance.vue

@@ -42,7 +42,11 @@ export default {
       AdaBModels: 2766,
       GradBModels: 2926,
       AllDetails: '',
-      platform: ''
+      platform: '',
+      count: 0,
+      storeData: [],
+      storePerformance: [],
+      storeParameters: []
     }
   },
   methods: {
@@ -64,7 +68,7 @@ export default {
     },
     provenance () {
       var canvas = document.getElementById("main-canvas");
-      var width = this.WH[0]*9 // interactive visualization
+      var width = this.WH[0]*7 // interactive visualization
       var height = this.WH[1]*0.58 // interactive visualization
 
       var flagKNN = 0
@@ -79,10 +83,22 @@ export default {
       var flagAdaB = 0
       var flagGradB = 0
 
+      var localStackStore = []
       var StackInfo = JSON.parse(this.stackInformation[1])
+      var arrayOfNumbers = StackInfo.map(Number)
+      this.storeData.push(arrayOfNumbers)
+      localStackStore = this.storeData.slice()
+
+      var localPerfStore = []
       var performanceLoc = JSON.parse(this.AllDetails[0])
+      this.storePerformance.push(performanceLoc)
+      localPerfStore = this.storePerformance.slice()
+
+      var localParamsStore = []
       var parameters = JSON.parse(this.AllDetails[2])
       var parameters = JSON.parse(parameters)
+      this.storeParameters.push(parameters)
+      localParamsStore = this.storeParameters.slice()
 
       var stringParameters = []
       var temp = 0
@@ -286,15 +302,18 @@ export default {
         var y = e.clientY - canvas.getBoundingClientRect().top;
         var p = plat.getPickingPixel(x * plat.pixelRatio, y * plat.pixelRatio);
 
+        var mergedIDs = [].concat.apply([], localStackStore)
+        var mergedPerf = [].concat.apply([], localPerfStore)
+        var mergedParams = [].concat.apply([], localParamsStore)
+
         if (p) {
 
 				// Show the tooltip only when there is nodeData found by the mouse
-
           d3.select('#tooltip')
 					.style('opacity', 0.8)
 					.style('top', x + 5 + 'px')
 					.style('left', y + 5 + 'px')
-					.html('Model ID: '+StackInfo[p[1]]+'<br>'+'Parameters: '+JSON.stringify(parameters[p[1]])+'<br> # Performance (%) #: '+performanceLoc[p[1]]);
+					.html('Model ID: '+mergedIDs[p[1]]+'<br>'+'Parameters: '+JSON.stringify(mergedParams[p[1]])+'<br> # Performance (%) #: '+mergedPerf[p[1]]);
 
 			} else {
 
@@ -306,21 +325,46 @@ export default {
 			}
       }
       const stringStep = "Stack "
-      var myButton = '<button id="HistoryReturnButtons'+this.counter+'" class="dynamic_buttons">'+stringStep+this.counter+'</button>&nbsp;&nbsp;&nbsp;'
+      var myButton = '<button id="HistoryReturnButtons'+this.counter+'" class="dynamic_buttons">'+stringStep+this.counter+'</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
       $("#dynamic-buttons").append(myButton);
 
-      function checkhistory () {
-        console.log(event)
-        //call the previous stack depending on button clicked.
+   $(document).on('click','.dynamic_buttons', function() {
+      var btns = document.getElementsByClassName('dynamic_buttons')
+
+      btns.forEach(btnlocal => {
+        btnlocal.style.fontWeight = 'normal';
+      });
+
+      function cleanLoc(obj) {
+        var propNames = Object.getOwnPropertyNames(obj);
+        for (var i = 0; i < propNames.length; i++) {
+          var propName = propNames[i];
+          if (obj[propName] === null || obj[propName] === undefined) {
+            delete obj[propName];
+          }
         }
+      }
+
+      var btn = document.getElementById($(this).attr('id'));
+      btn.style.fontWeight = 'bold';
+
+      EventBus.$emit('ChangeKey', 0)
+      EventBus.$emit('SendSelectedPointsToServerEvent', localStackStore[parseInt($(this).attr('id').replace(/\D/g,''))-1])
+      
+      stringParameters = []
+      temp = 0
+      for (let i = 0; i < localStackStore[parseInt($(this).attr('id').replace(/\D/g,''))-1].length; i++) {
+        cleanLoc(localPerfStore[parseInt($(this).attr('id').replace(/\D/g,''))-1][i])
+        temp = JSON.stringify(Object.assign({ID: localStackStore[parseInt($(this).attr('id').replace(/\D/g,''))-1][i]}, localPerfStore[parseInt($(this).attr('id').replace(/\D/g,''))-1][i]))
+        stringParameters.push(temp)
+      }
+      EventBus.$emit('ExtractResults', stringParameters)
+
+      }
+    );
   },
   },
   mounted () {
-   // fix that 
-   $(document).on('click','.dynamic_buttons', function() {
-      console.log($(this).attr('id'))
-      }
-    );
     EventBus.$on('ParametersProvenance', data => {this.AllDetails = data})
     EventBus.$on('InitializeProvenance', data => {this.stackInformation = data})
     EventBus.$on('InitializeProvenance', this.provenance)

frontend/src/components/ScatterPlot.vue

@@ -52,7 +52,14 @@ export default {
       valueStackRemove: 'Remove Unselected from Stack',
       DataPointsSelUpdate: [],
       ModelsIDGray: [],
-      valueResetSel: 'Reset Metric Selection'
+      valueResetSel: 'Reset Metric Selection',
+      newStackPoints: '',
+      colorsStore: [],
+      MDSStore: [],
+      parametersStore: [],
+      TSNEStore: [],
+      modelIDStore: [],
+      UMAPStore: []
     }
   },
   methods: {
@@ -86,17 +93,21 @@ export default {
 
       var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
 
-      if (this.newColorsUpdate.length != 0) {
+      /*if (this.newColorsUpdate.length != 0) {
         let resultsClear = JSON.parse(this.newColorsUpdate)
         for (let j = 0; j < Object.values(resultsClear).length; j++) {
           colorsforScatterPlot.push(Object.values(resultsClear)[j])
         }
-      }
+      }*/
 
       var MDSData = JSON.parse(this.ScatterPlotResults[1])
       var parameters = JSON.parse(this.ScatterPlotResults[2])
       var TSNEData = JSON.parse(this.ScatterPlotResults[12])
+      if (this.newStackPoints.length != 0) {
+        var modelId = this.newStackPoints
+      } else {
         var modelId = JSON.parse(this.ScatterPlotResults[13])
+      }
       var UMAPData = JSON.parse(this.ScatterPlotResults[17])
 
       EventBus.$emit('sendPointsNumber', modelId.length)
@@ -136,11 +147,6 @@ export default {
         var colorsforScatterPlotNew = []
         for (let i = 0; i < modelId.length; i++) {
           if (listofNumbersModelsIDs.includes(modelId[i])) {
-            StackModelsIDs.push(modelId[i])
-            parametersNew.push(parameters[i])
-            colorsforScatterPlotNew.push('rgb(211,211,211)')
-            MDSDataNewX.push(MDSData[0][i])
-            MDSDataNewY.push(MDSData[1][i])
           } else {
             StackModelsIDs.push(modelId[i])
             parametersNew.push(parameters[i])
@@ -157,7 +163,7 @@ export default {
         MDSData[0] = MDSDataNewX
         MDSData[1] = MDSDataNewY
         colorsforScatterPlot = colorsforScatterPlotNew
-        //EventBus.$emit('NewHeatmapAccordingtoNewStack', StackModelsIDs)
+        EventBus.$emit('NewHeatmapAccordingtoNewStack', StackModelsIDs)
       }
       var DataGeneral
 
@@ -192,7 +198,7 @@ export default {
             colorscale: 'Viridis',
             colorbar: {
               title: '# Performance (%) #',
-              titleside: 'Top'
+              titleside:'right',
             },
           }
         
@@ -358,9 +364,10 @@ export default {
             if (evt.points[i] === undefined) {
               break
             } else {
-              const OnlyId = evt.points[i].text.split(';')
-              ClassifierIDsList.push(OnlyId[0])
-              let numb = OnlyId[0].match(/\d/g);
+              const OnlyId = evt.points[i].text.split(' ')[2]
+              const OnlyIdCleared = OnlyId.split('<br>')
+              ClassifierIDsList.push(OnlyIdCleared[0])
+              let numb = OnlyIdCleared[0].match(/\d/g);
               numb = numb.join("");
               let numberNumb = Number(numb)
               ClassifierIDsListCleared.push(numberNumb)
@@ -372,9 +379,11 @@ export default {
             }
           }
           if (allModels != '') {
+            EventBus.$emit('ChangeKey', 1)
             EventBus.$emit('SendSelectedPointsToServerEvent', pushModelsRemaining)
-            EventBus.$emit('SendSelectedPointsToBrushHeatmap', pushModelsRemaining)
+            EventBus.$emit('SendSelectedPointsToBrushHeatmap', ClassifierIDsListCleared)
           } else {
+            EventBus.$emit('ChangeKey', 1)
             EventBus.$emit('SendSelectedPointsToServerEvent', '')
           }
         }
@@ -426,8 +435,11 @@ export default {
     }
   },
   mounted() {
-    EventBus.$on('updateMetricsScatter', data => { this.newColorsUpdate = data })
-    EventBus.$on('updateMetricsScatter', this.ScatterPlotView)
+    /*EventBus.$on('updateMetricsScatter', data => { this.newColorsUpdate = data })
+    EventBus.$on('updateMetricsScatter', this.ScatterPlotView)*/
+
+    EventBus.$on('newPointsStack', data => { this.newStackPoints = data })
+    EventBus.$on('newPointsStack', this.ScatterPlotView)
 
     EventBus.$on('GrayOutPoints', data => { this.ModelsIDGray = data })
     EventBus.$on('GrayOutPoints', this.ScatterPlotView)

run.py

@@ -1049,7 +1049,6 @@ def PreprocessingPredUpdate(Models):
     dfGradBFiltered = dfGradB.loc[GradBModels, :]
 
     df_concatProbs = pd.concat([dfKNNFiltered, dfSVCFiltered, dfGausNBFiltered, dfMLPFiltered, dfLRFiltered, dfLDAFiltered, dfQDAFiltered, dfRFFiltered, dfExtraTFiltered, dfAdaBFiltered, dfGradBFiltered])
-
     listProbs = df_concatProbs.index.values.tolist()
     deletedElements = 0
     for index, element in enumerate(listProbs):
@@ -1475,6 +1474,8 @@ def InitializeEnsemble():
     global ModelSpaceMDS
     global ModelSpaceTSNE
     
+    XModels = XModels.fillna(0)
+    
     ModelSpaceMDS = FunMDS(XModels)
     ModelSpaceTSNE = FunTsne(XModels)
     ModelSpaceTSNE = ModelSpaceTSNE.tolist()
@@ -1583,14 +1584,17 @@ def SendPredBacktobeUpdated():
 def RetrieveSelClassifiersID():
     ClassifierIDsList = request.get_data().decode('utf8').replace("'", '"')
     ComputeMetricsForSel(ClassifierIDsList)
+    ClassifierIDCleaned = json.loads(ClassifierIDsList)
 
-    key = 1
-    EnsembleModel(ClassifierIDsList, key)
+    global keySpec
+    keySpec = ClassifierIDCleaned['keyNow']
+    EnsembleModel(ClassifierIDsList, 1)
     return 'Everything Okay'
 
 def ComputeMetricsForSel(Models):
     Models = json.loads(Models)
     MetricsAlltoSel = PreprocessingMetrics()
+
     listofModels = []
     for loop in Models['ClassifiersList']:
         listofModels.append(loop)
@@ -2340,6 +2344,8 @@ def EnsembleModel(Models, keyRetrieved):
     global all_classifiersSelection  
     all_classifiersSelection = []
 
+    global all_classifiers
+
     global XData
     global yData
     global sclf
@@ -2347,7 +2353,6 @@ def EnsembleModel(Models, keyRetrieved):
     lr = LogisticRegression()
 
     if (keyRetrieved == 0):
-        global all_classifiers
         all_classifiers = []
         columnsInit = []
         columnsInit = [XData.columns.get_loc(c) for c in XData.columns if c in XData]
@@ -2443,8 +2448,11 @@ def EnsembleModel(Models, keyRetrieved):
     elif (keyRetrieved == 1):     
         Models = json.loads(Models)
         ModelsAll = preProceModels()
+        global keySpec
+        print(ModelsAll)
         for index, modHere in enumerate(ModelsAll):
             flag = 0
+            print(Models['ClassifiersList'])
             for loop in Models['ClassifiersList']:
                 if (int(loop) == int(modHere)):
                     flag = 1
@@ -2456,6 +2464,9 @@ def EnsembleModel(Models, keyRetrieved):
                             meta_classifier=lr,
                             random_state=RANDOM_SEED,
                             n_jobs = -1)
+        print(keySpec)
+        if (keySpec == 0):
+            sclfStack = sclf
     elif (keyRetrieved == 2):
         # fix this part!
         if (len(all_classifiersSelection) == 0):