three views ready

frontend/package.json

@@ -11,15 +11,15 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.6.0",
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "^7.6.0",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.22",
     "@fortawesome/free-solid-svg-icons": "^5.10.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
     "@statnett/vue-plotly": "^0.3.2",
     "@types/d3-drag": "^1.2.3",
-    "@types/node": "^12.7.4",
+    "@types/node": "^12.7.5",
     "ajv": "^6.10.2",
     "audit": "0.0.6",
     "axios": "^0.19.0",
@@ -27,7 +27,7 @@
     "babel-preset-vue": "^2.0.2",
     "blob": "0.0.5",
     "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.0.0-rc.27",
+    "bootstrap-vue": "^2.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "d3": "^5.12.0",
     "d3-drag": "^1.2.4",
@@ -42,11 +42,11 @@
     "fs": "0.0.2",
     "fs-es6": "0.0.2",
     "ify-loader": "^1.1.0",
-    "interactjs": "^1.6.1",
+    "interactjs": "^1.6.2",
     "jquery": "^3.4.1",
     "mdbvue": "^5.8.1",
     "mini-css-extract-plugin": "^0.8.0",
-    "npm-check-updates": "^3.1.21",
+    "npm-check-updates": "^3.1.22",
     "papaparse": "^5.0.2",
     "parcoord-es": "^2.2.10",
     "plotly.js": "^1.49.4",
@@ -55,20 +55,20 @@
     "toposort": "^2.0.2",
     "transform-loader": "^0.2.4",
     "update": "^0.7.4",
-    "vega": "^5.5.3",
+    "vega": "^5.6.0",
     "vue": "^2.6.10",
     "vue-bootstrap-slider": "^2.1.8",
-    "vue-papa-parse": "^1.2.1",
+    "vue-papa-parse": "^1.2.2",
     "vue-plotly": "^1.0.0",
     "vue-router": "^3.1.3",
     "vue-slider-component": "^3.0.40",
     "vue2-simplert-plugin": "^0.5.3",
-    "webpack-cli": "^3.3.7",
+    "webpack-cli": "^3.3.8",
     "webpack-require": "0.0.16"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
     "@babel/plugin-proposal-function-sent": "^7.5.0",
     "@babel/plugin-proposal-json-strings": "^7.2.0",
@@ -77,8 +77,8 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-env": "^7.6.0",
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
@@ -92,7 +92,7 @@
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^9.2.0",
+    "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^5.2.3",
@@ -103,7 +103,7 @@
     "node-notifier": "^5.4.3",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "ora": "^3.4.0",
-    "portfinder": "^1.0.23",
+    "portfinder": "^1.0.24",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-url": "^8.0.0",

frontend/src/components/AlgorithmHyperParam.vue

@@ -43,6 +43,7 @@ export default {
             Object.assign(ObjectsParams[i], {performance: valuesPerf[i]}, {model: i})
             ArrayCombined[i] = ObjectsParams[i]
         }
+        EventBus.$emit('AllAlModels', ArrayCombined.length)
         this.pc = ParCoords()("#PCP")
             .data(ArrayCombined)
             .color(colorGiv)
@@ -56,6 +57,7 @@ export default {
             .interactive();
 
         this.pc.on("brush", function(d) {
+          EventBus.$emit('AllSelModels', d.length)
           EventBus.$emit('UpdateBoxPlot', d)
         });
       }
@@ -65,9 +67,9 @@ export default {
     },
     brushed () {
         if (this.pc.brushed()) {
-            EventBus.$emit('ReturningBrushedPoints', this.pc.brushed())
+          EventBus.$emit('ReturningBrushedPoints', this.pc.brushed())
         } else {
-            EventBus.$emit('ReturningBrushedPoints', this.pc.data())
+          EventBus.$emit('ReturningBrushedPoints', this.pc.data())
         }
     },
     clear () {

frontend/src/components/BarChart.vue

@@ -27,15 +27,24 @@ export default {
   data () {
     return {
       BarChartResults: '',
+      ClassNamesOverview: ''
     }
   },
   methods: {
     BarChartView () {
         const PerClassMetrics = JSON.parse(this.BarChartResults[4])
-        const ClassNames = JSON.parse(this.BarChartResults[5])
+        var ClassNames = JSON.parse(this.BarChartResults[5])
-        const limit = JSON.parse(this.BarChartResults[12])
+        this.ClassNamesOverview = ClassNames
+        const limit = JSON.parse(this.BarChartResults[13])
         let ClassifierswithoutFI = JSON.parse(this.BarChartResults[8])
         let ClassifierswithFI = JSON.parse(this.BarChartResults[9])
+
+        for (let j = 0; j < this.ClassNamesOverview.length; j++) {
+            Plotly.purge('barChartf1Score' + j)
+            Plotly.purge('barChartPrecision' + j)
+            Plotly.purge('barChartRecall' + j)
+        }
+
         var Classifiers
         Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI)
 
@@ -77,8 +86,8 @@ export default {
 
         var layoutPrec = {
         autosize: false,
-        width: 150,
+        width: 300,
-        height: 150,
+        height: 300,
         xaxis: {
             title: 'Classifier ID',
             type:"category",
@@ -109,8 +118,8 @@ export default {
 
         var layoutRec = {
         autosize: false,
-        width: 150,
+        width: 300,
-        height: 150,
+        height: 300,
         xaxis: {
             title: 'Classifier ID',
             type:"category",
@@ -141,8 +150,8 @@ export default {
 
         var layoutf1Score = {
         autosize: false,
-        width: 150,
+        width: 300,
-        height: 150,
+        height: 300,
         xaxis: {
             title: 'Classifier ID',
             type:"category",
@@ -242,11 +251,19 @@ export default {
 
             Plotly.newPlot('barChartf1Score' + j, f1ScoreData, layoutf1Score)
                 }
+        },
+        reset () {
+            for (let j = 0; j < this.ClassNamesOverview.length; j++) {
+                Plotly.purge('barChartf1Score' + j)
+                Plotly.purge('barChartPrecision' + j)
+                Plotly.purge('barChartRecall' + j)
+            }
         }
     },
     mounted() {
         EventBus.$on('emittedEventCallingBarChart', data => { this.BarChartResults = data })
         EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
+        EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/DataSpace.vue

@@ -43,7 +43,7 @@ export default {
             visible: false
         }
         }
-        Plotly.newPlot('OverviewDataPlotly', Data, layout)
+        Plotly.newPlot('OverviewDataPlotly', Data, layout, {responsive: true})
     }
   },
   mounted() {

frontend/src/components/FeatureSelection.vue

@@ -21,7 +21,7 @@ export default {
         let Features= JSON.parse(this.GetResults[7])
         let ClassifierswithoutFI = JSON.parse(this.GetResults[8])
         let ClassifierswithFI = JSON.parse(this.GetResults[9])
-        const limit = JSON.parse(this.GetResults[12])
+        const limit = JSON.parse(this.GetResults[13])
         var Classifiers
         Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI)
         var limitList = []
@@ -103,11 +103,15 @@ export default {
             }
         });
         EventBus.$emit('SendSelectedFeaturesEvent', results)
+      },
+      reset () {
+        document.getElementById("myDynamicTable").innerHTML = "";
       }
   },
   mounted () {
         EventBus.$on('emittedEventCallingTableView', data => { this.GetResults = data })
         EventBus.$on('emittedEventCallingTableView', this.FeatureSelection)
+        EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/FinalResultsLinePlot.vue

@@ -92,7 +92,7 @@ export default {
             zeroline: false
         }
       }
-      Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true})
+      Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true, responsive: true})
     }
   },
   mounted() {

frontend/src/components/Heatmap.vue

@@ -24,7 +24,7 @@ export default {
 
       var FeaturesAccuracy = JSON.parse(this.GetResultsAll[6])
       var Features= JSON.parse(this.GetResultsAll[7])
-      const limit = JSON.parse(this.GetResultsAll[12])
+      const limit = JSON.parse(this.GetResultsAll[13])
       var Classifiers = JSON.parse(this.GetResultsAll[8])
         
       if (Classifiers != '') { 
@@ -116,11 +116,16 @@ export default {
             .style("fill", function(d) { return myColor(d.value)} )
 
       }
+    },
+    reset () {
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
     }
   },
   mounted () {
         EventBus.$on('emittedEventCallingHeatmapView', data => { this.GetResultsAll = data })
         EventBus.$on('emittedEventCallingHeatmapView', this.Heatmap)
+        EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/Main.vue

@@ -38,7 +38,7 @@
       <b-row class="mb-3 mt-3">
         <b-col cols="3">
           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Algorithms Selection and HyperParameters Search</mdb-card-header>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Algorithms Selection and HyperParameters Search [Sel.:{{valueSel}}/All:{{valueAll}}]</mdb-card-header>
               <mdb-card-body>
                   <Algorithms :width="width" :height="height"/>
                   <AlgorithmHyperParam/>
@@ -87,6 +87,7 @@
                     <option value="MDS">MDS Projection</option>
                     <option value="TSNE">t-SNE Projection</option>
                 </select>
+                [Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
               </mdb-card-header>
               <mdb-card-body>
                 <ScatterPlot/>
@@ -175,7 +176,11 @@ export default Vue.extend({
       combineWH: [],
       basicValuesFact: [],
       sumPerClassifier: [],
-      representationSelection: 'MDS'
+      representationSelection: 'MDS',
+      valueSel: 0,
+      valueAll: 0,
+      OverSelLength: 0,
+      OverAllLength: 0
     }
   },
   methods: {
@@ -233,6 +238,8 @@ export default Vue.extend({
           console.log('Server successfully sent all the data related to visualizations!')
           EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
           var length = JSON.parse(this.OverviewResults[0]).length
+          this.OverSelLength = length
+          this.OverAllLength = length
           if (length < this.limitModels) {
             this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
             EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
@@ -274,36 +281,43 @@ export default Vue.extend({
         })
     },
     SendSelectedPointsToServer () {
-      const path = `http://127.0.0.1:5000/data/ServerRequestSelPoin`
+      if (this.ClassifierIDsList === ''){
-      const postData = {
+        this.OverSelLength = 0
-        ClassifiersList: this.ClassifierIDsList
+        EventBus.$emit('resetViews')
-      }
+      } else {
-      const axiosConfig = {
+        const path = `http://127.0.0.1:5000/data/ServerRequestSelPoin`
-        headers: {
+      
-          'Content-Type': 'application/json',
+        const postData = {
-          'Access-Control-Allow-Origin': '*',
+          ClassifiersList: this.ClassifierIDsList
-          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
-          'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
         }
-      }
+        const axiosConfig = {
-      axios.post(path, postData, axiosConfig)
+          headers: {
-        .then(response => {
+            'Content-Type': 'application/json',
-          console.log('Sent the selected points to the server (scatterplot)!')
+            'Access-Control-Allow-Origin': '*',
-          if (this.ClassifierIDsList.length < this.limitModels) {
+            'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
-            this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
+            'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
-            EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
-            EventBus.$emit('emittedEventCallingChordView', this.OverviewResults)
-            EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
-            EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
-            EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
-            EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
-            this.OverviewResults.pop()
           }
-          this.getFinalResults()
+        }
-        })
+        axios.post(path, postData, axiosConfig)
-        .catch(error => {
+          .then(response => {
-          console.log(error)
+            console.log('Sent the selected points to the server (scatterplot)!')
-        })
+            this.OverSelLength = this.ClassifierIDsList.length
+            if (this.ClassifierIDsList.length < this.limitModels) {
+              this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
+              EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
+              EventBus.$emit('emittedEventCallingChordView', this.OverviewResults)
+              EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
+              EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
+              EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
+              EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
+              this.OverviewResults.pop()
+            }
+            this.getFinalResults()
+          })
+          .catch(error => {
+            console.log(error)
+          })
+      }
     },
     getFinalResults () {
       this.FinalResults = this.getFinalResultsFromBackend()
@@ -556,7 +570,11 @@ export default Vue.extend({
     EventBus.$on('UpdateBoxPlot', this.UpdateBrushBoxPlot)
     EventBus.$on('CallFactorsView', data => { this.basicValuesFact = data })
     EventBus.$on('CallFactorsView', this.factors)
-    
+    EventBus.$on('AllAlModels', data => {
+      this.valueSel = data
+      this.valueAll = data
+    })
+    EventBus.$on('AllSelModels', data => {this.valueSel = data})
     //Prevent double click to search for a word. 
     document.addEventListener('mousedown', function (event) {
       if (event.detail > 1) {

frontend/src/components/PredictionsSpace.vue

@@ -42,7 +42,7 @@ export default {
             visible: false
         }
         }
-        Plotly.newPlot('OverviewPredPlotly', Data, layout)
+        Plotly.newPlot('OverviewPredPlotly', Data, layout, {responsive: true})
     }
   },
   mounted() {

frontend/src/components/ScatterPlot.vue

@@ -19,7 +19,7 @@ export default {
       representationDefault: 'MDS',
       colorsforOver: [],
       max: 0,
-      min: 0,
+      min: 0
     }
   },
   methods: {
@@ -123,27 +123,34 @@ export default {
           legend: {orientation: 'h', y: -0.3},
         }
       }
-
+     
       var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
       
-      Plotly.newPlot('OverviewPlotly', DataGeneral, layout, config)
+      var scat = document.getElementById('OverviewPlotly')
+      
+      Plotly.newPlot(scat, DataGeneral, layout, config)
+
       this.selectedPointsOverview()
     },
     selectedPointsOverview () {
       const OverviewPlotly = document.getElementById('OverviewPlotly')
       OverviewPlotly.on('plotly_selected', function (evt) {
-        const ClassifierIDsList = []
+        if (typeof evt !== 'undefined') {
-        for (let i = 0; evt.points.length; i++) {
+          const ClassifierIDsList = []
-          if (evt.points[i] === undefined) {
+          for (let i = 0; evt.points.length; i++) {
-            break
+            if (evt.points[i] === undefined) {
+              break
+            } else {
+              const OnlyId = evt.points[i].text.split(';')
+              ClassifierIDsList.push(OnlyId[0])
+            }
+          }
+          if (ClassifierIDsList != '') {
+            EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList)
           } else {
-            const OnlyId = evt.points[i].text.split(';')
+            EventBus.$emit('SendSelectedPointsToServerEvent', '')
-            ClassifierIDsList.push(OnlyId[0])
           }
         }
-        if (ClassifierIDsList != '') {
-          EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList)
-        }
       })
     },
     UpdateScatter () {

frontend/src/components/StretchedChord.vue

@@ -23,7 +23,7 @@ export default {
         const FeatureImportance = JSON.parse(this.AllResults[3])
         const ClassNames = JSON.parse(this.AllResults[5])
         const ClassifiersIDs = JSON.parse(this.AllResults[9])
-        const limit = JSON.parse(this.AllResults[12])
+        const limit = JSON.parse(this.AllResults[13])
         var limitList = []
         if (limit == '') {
             for (let i = 0; i < ClassifiersIDs.length; i++) {
@@ -51,7 +51,6 @@ export default {
                     if (returnvalue === undefined || returnvalue.length == 0) {
                     } else {
                          if (returnvalue[0]['classifier'] != 'M undefined') {
-                            console.log(returnvalue)
                             SortFeaturesPerClass.push(returnvalue)
                         }
                     }
@@ -448,11 +447,15 @@ export default {
                 if (Object.prototype.hasOwnProperty.call(obj, key)) size++
             }
             return size
-        }                  
+        },
+        reset () {
+            d3.selectAll("#chart > *").remove(); 
+        }               
     },
     mounted () {
         EventBus.$on('emittedEventCallingChordView', data => { this.AllResults = data })
         EventBus.$on('emittedEventCallingChordView', this.StretchChord)
+        EventBus.$emit('resetViews', this.reset)
     }
 }
 </script>