responsive

README.md

@@ -1,9 +1,10 @@
 # StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
+
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/715aec02557a47cdb42562ebb6c4d5fe)](https://www.codacy.com/gh/angeloschatzimparmpas/StackGenVis/dashboard?utm_source=github.com&utm_medium=referral&utm_content=angeloschatzimparmpas/StackGenVis&utm_campaign=Badge_Grade)
 
 This Git repository contains the code that accompanies the research paper "StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics". The details of the experiments and the research outcome are described in [the paper](https://doi.org/10.1109/TVCG.2020.3030352).
 
-**Note:** StackGenVis is optimized to work better for standard resolutions (such as 1440p/QHD (Quad High Definition)). Any other resolution might need manual adjustment of your browser's zoom level to work properly.
+**Note:** StackGenVis is optimized to work better for standard resolutions (such as 1440p/QHD (Quad High Definition) and 1080p). For lower resolutions, our recommendation is to use the collapsible functionality of the top dark gray panels. Finally, any other resolution might need manual adjustment of your browser's zoom level to work properly.
 
 **Note:** The tag `paper-version` matches the implementation at the time of the paper's publication. The current version might look significantly different depending on how much time has passed since then.
 

frontend/src/components/Algorithms.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="exploding_boxplot" class="exploding_boxplot" style="min-height: 450px;"></div>
+    <div id="exploding_boxplot" class="exploding_boxplot" style="min-height: 337px;"></div>
   </div>
 </template>
 
@@ -342,7 +342,7 @@ export default {
       // label : displayed text in toolbox
       this.chart = exploding_boxplot(data, {y:'# Performance (%) #',group:'Algorithm',color:'Algorithm',label:'Model'})
       this.chart.width(this.WH[0]*10.225) // interactive visualization
-      this.chart.height(this.WH[1]*0.95) // interactive visualization
+      this.chart.height(this.WH[1]*0.72) // interactive visualization
       //call chart on a div
       this.chart('#exploding_boxplot')       
 
@@ -1073,7 +1073,7 @@ export default {
           $(el)[8].dispatchEvent(new Event('click'))
         } else if (this.selectedAlgorithm == 'AdaB') {
           $(el)[9].dispatchEvent(new Event('click'))
-        } else {
+        } else if (this.selectedAlgorithm == 'GradB') {
           $(el)[10].dispatchEvent(new Event('click'))
         }
       }
@@ -1093,8 +1093,8 @@ export default {
       this.WH = data})
     EventBus.$on('ResponsiveandChange', data => {
       this.WH = data})
-    EventBus.$on('ResponsiveandChange', this.boxplot)
     EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
+    EventBus.$on('ResponsiveandChange', this.brushed)
     EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
       this.selectedAlgorithm = data})
     EventBus.$on('brusheAllOn', this.brushActivationAll)

frontend/src/components/BalancePredictions.vue

@@ -18,7 +18,8 @@
             return {
             resultsfromOverview: '',
             newResultsFromSelection: '',
-            responsiveWidthHeight: []
+            responsiveWidthHeight: [],
+            smallScreenMode: '0px',
             }
         },
         methods: {
@@ -31,9 +32,17 @@
             var svg = d3.select("#my_dataviz");
             svg.selectAll("*").remove();
 
-            // responsive visualizations
-            var widthInitial = this.responsiveWidthHeight[0]*6.5
-            var heightInitial = this.responsiveWidthHeight[1]*0.5
+            if (this.smallScreenMode != "370px") {
+              var widthInitial = this.responsiveWidthHeight[0]*6.5
+              var heightInitial = this.responsiveWidthHeight[1]*0.5
+              var heightforText = 215
+              var widthforText = 215
+            } else {
+              var widthInitial = this.responsiveWidthHeight[0]*6.8
+              var heightInitial = this.responsiveWidthHeight[1]*0.395
+              var heightforText = 202
+              var widthforText = 20
+            }
 
             var performancePerModel = JSON.parse(this.resultsfromOverview[0])
             var performancePerModelSelection = []
@@ -186,12 +195,11 @@
                   
 
             // Handmade legend
-            var heightforText = 215
-            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("All Points").style("font-size", "16px").attr("alignment-baseline","middle")
-            svg.append("text").attr("x", 515).attr("y", heightforText-6).text("# Performance (%) #").style("font-size", "16px").attr("alignment-baseline","top")
-            svg.append("text").attr("x", 800).attr("y", heightforText).text("Selected Points").style("font-size", "16px").attr("alignment-baseline","middle")
+            svg.append("circle").attr("cx", widthforText).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#000")
+            svg.append("circle").attr("cx", widthforText+570).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#D3D3D3")
+            svg.append("text").attr("x", widthforText+15).attr("y", heightforText).text("All Points").style("font-size", "16px").attr("alignment-baseline","middle")
+            svg.append("text").attr("x", widthforText+275).attr("y", heightforText-6).text("# Performance (%) #").style("font-size", "16px").attr("alignment-baseline","top")
+            svg.append("text").attr("x", widthforText+585).attr("y", heightforText).text("Selected Points").style("font-size", "16px").attr("alignment-baseline","middle")
             svg.append("text").attr("transform", "rotate(-90)").attr("x", -89).attr("y", -45).style("text-anchor", "middle").style("font-size", "16px").text("Number of Models"); 
 
             // Function to compute density
@@ -216,8 +224,7 @@
           EventBus.$on('UpdateBalanceView', this.Balance)
           EventBus.$on('Responsive', data => {
           this.responsiveWidthHeight = data})
-          EventBus.$on('ResponsiveandChange', data => {
-          this.responsiveWidthHeight = data})
+          EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
 
           // reset view
           EventBus.$on('resetViews', this.reset)

frontend/src/components/BarChart.vue

@@ -409,7 +409,7 @@ export default {
         autosize: true,
         barmode: 'group',
         width: this.WH[0]*10.205,
-        height: this.WH[1]*0.6,
+        height: this.WH[1]*0.61,
             xaxis: {
                 title: 'Algorithm',
                 type:"category",
@@ -585,6 +585,7 @@ export default {
 
       EventBus.$on('Responsive', data => {
           this.WH = data})
+          
       EventBus.$on('ResponsiveandChange', data => {
           this.WH = data})
 

frontend/src/components/DataSetExecController.vue

@@ -4,8 +4,8 @@
   <select id="selectFile" @change="selectDataSet()">
       <option value="HeartC.csv" selected>Heart Disease</option>
       <!--<option value="StanceC.csv">Stance in Texts</option>-->
-      <option value="IrisC.csv">Iris</option>
-      <option value="local">Upload New File</option>
+      <option value="IrisC.csv">Iris Flower</option>
+      <option value="local">Upload File</option>
   </select>
 
   <button class="btn-outline-primary"
@@ -39,7 +39,7 @@ export default {
       RetrieveValueCSV: 'DiabetesC', // default value for the first data set
       value: 'Confirm',
       valueReset: 'Reset',
-      dataset: 'Data set'
+      dataset: 'Data'
     }
   },
   methods: {
@@ -49,7 +49,7 @@ export default {
       this.RetrieveValueCSV = this.RetrieveValueCSV.split('.')[0]
 
       if (this.RetrieveValueCSV == "DiabetesC" || this.RetrieveValueCSV == "HeartC" || this.RetrieveValueCSV == "IrisC" || this.RetrieveValueCSV == "StanceC") { // This is a function that handles a new file, which users can upload.
-        this.dataset = "Data set"
+        this.dataset = "Data"
         d3.select("#data").select("input").remove(); // Remove the selection field.
         EventBus.$emit('SendToServerDataSetConfirmation', this.RetrieveValueCSV)
       } else {

frontend/src/components/DataSpace.vue

@@ -30,7 +30,7 @@
       <font-awesome-icon icon="eraser" />
       {{ removeData }}
       </button>
-      &nbsp;&nbsp;
+      &nbsp;&nbsp;<br>
       History Manager: <button
       id="saveID"
       v-on:click="save">
@@ -76,6 +76,7 @@ export default {
       colorsValues: ['#808000','#008080','#bebada','#fccde5','#d9d9d9','#bc80bd','#ccebc5'],
       onlyOnce: true,
       restylePoints: [],
+      smallScreenMode: '0px'
     }
   },
   methods: {
@@ -128,10 +129,15 @@ export default {
     },
     scatterPlotDataView () {
       Plotly.purge('OverviewDataPlotly')
-  
-      // responsive visualization
-      let width = this.responsiveWidthHeight[0]*6.5
-      let height = this.responsiveWidthHeight[1]*1.1
+        
+      if (this.smallScreenMode != "370px") {
+        // responsive visualization
+        var width = this.responsiveWidthHeight[0]*6.5
+        var height = this.responsiveWidthHeight[1]*0.85
+      } else {
+        var width = this.responsiveWidthHeight[0]*6.5
+        var height = this.responsiveWidthHeight[1]*0.83
+      }
 
       var target_names = JSON.parse(this.dataPoints[0])
       const XandYCoordinatesMDS = JSON.parse(this.dataPoints[1])
@@ -296,12 +302,9 @@ export default {
         for (let i = 0; i < result.Xax.length; i++) {
           IDs.push(i)
           if (this.restylePoints.length != 0) {
-            console.log('test1')
             if (XandYCoordinatesMDS[0].length == this.restylePoints.length) {
-              console.log('test2')
               colorUpdate.push('rgb(0, 0, 0)')
             } else {
-              console.log('test3')
               if (this.restylePoints.includes(i)) {
                   colorUpdate.push('rgb(175, 68, 39)')
                 } else {
@@ -309,7 +312,6 @@ export default {
                 }
               }
             } else {
-              console.log('test')
               colorUpdate.push('rgb(0, 0, 0)')
           }
         }
@@ -516,8 +518,8 @@ export default {
     // make the view responsive to window changes
     EventBus.$on('Responsive', data => {
       this.responsiveWidthHeight = data})
-    EventBus.$on('ResponsiveandChange', data => {
-      this.responsiveWidthHeight = data})
+    
+    EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
 
     EventBus.$on('RepresentationSelectionData', data => {this.representationDef = data})
     EventBus.$on('RepresentationSelectionData', this.scatterPlotDataView)

frontend/src/components/FinalResultsLinePlot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="LinePlot" style="min-height: 363px;"></div>
+  <div id="LinePlot" style="min-height: 365px;"></div>
 </template>
 
 <script>
@@ -46,7 +46,8 @@ export default {
       Stack_scoresNegative4: [],
       xaxis: [],
       WH: [],
-      firstTime: 0
+      firstTime: 0,
+      smallScreenMode: '0px',
     }
   },
   methods: {
@@ -128,7 +129,7 @@ export default {
         mode: "lines+markers", 
         marker : {
           symbol: 'circle' },
-        name: "Active Accuracy",
+        name: "Active Acc.",
         type: "scatter"
       }
 
@@ -140,7 +141,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(55,126,184,0)", 
         line: {color: "transparent"}, 
-        name: "Active Accuracy", 
+        name: "Active Acc.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -157,7 +158,7 @@ export default {
         mode: "lines+markers", 
         marker : {
             symbol: 'square' },
-        name: "Active Precision", 
+        name: "Active Pre.", 
         type: "scatter"
       }
 
@@ -169,7 +170,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(55,126,184,0)", 
         line: {color: "transparent"}, 
-        name: "Active Precision", 
+        name: "Active Pre.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -184,7 +185,7 @@ export default {
         mode: "lines+markers", 
         marker : {
             symbol: 'triangle-up' },
-        name: "Active Recall", 
+        name: "Active Rec.", 
         type: "scatter"
       }
 
@@ -196,7 +197,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(55,126,184,0)", 
         line: {color: "transparent"}, 
-        name: "Active Recall", 
+        name: "Active Rec.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -211,7 +212,7 @@ export default {
         mode: "lines+markers", 
         marker : {
             symbol: 'diamond' },
-        name: "Active F1 Score", 
+        name: "Active F1", 
         type: "scatter"
       }
 
@@ -223,7 +224,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(55,126,184,0)", 
         line: {color: "transparent"}, 
-        name: "Active F1 Score", 
+        name: "Active F1", 
         showlegend: false, 
         type: "scatter"
       }
@@ -240,7 +241,7 @@ export default {
         mode: "lines+markers", 
         marker : {
           symbol: 'x' },
-        name: "Stack Accuracy", 
+        name: "Stack Acc.", 
         type: "scatter"
       }
 
@@ -252,7 +253,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(228,26,28,0)", 
         line: {color: "transparent"}, 
-        name: "Stack Accuracy", 
+        name: "Stack Acc.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -267,7 +268,7 @@ export default {
         mode: "lines+markers", 
         marker : {
           symbol: 'cross' },
-        name: "Stack Precision", 
+        name: "Stack Pre.", 
         type: "scatter"
       }
 
@@ -279,7 +280,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(228,26,28,0)", 
         line: {color: "transparent"}, 
-        name: "Stack Precision", 
+        name: "Stack Pre.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -294,7 +295,7 @@ export default {
         mode: "lines+markers",
         marker : {
           symbol: 'triangle-down' },
-        name: "Stack Recall", 
+        name: "Stack Rec.", 
         type: "scatter"
       }
 
@@ -306,7 +307,7 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(228,26,28,0)", 
         line: {color: "transparent"}, 
-        name: "Stack Recall", 
+        name: "Stack Rec.", 
         showlegend: false, 
         type: "scatter"
       }
@@ -321,7 +322,7 @@ export default {
         mode: "lines+markers",
         marker : {
           symbol: 'hexagram' },
-        name: "Stack F1 Score", 
+        name: "Stack F1", 
         type: "scatter"
       }
 
@@ -333,15 +334,19 @@ export default {
         fill: "tozerox", 
         fillcolor: "rgba(228,26,28,0)", 
         line: {color: "transparent"}, 
-        name: "Stack F1 Score", 
+        name: "Stack F1", 
         showlegend: false, 
         type: "scatter"
       }
 
       const DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8, trace9, trace10, trace11, trace12, trace13, trace14, trace15, trace16]
 
-      var width = this.WH[0]*3.18 // interactive visualization
-      var height = this.WH[1]*0.765 // interactive visualization
+      if (this.smallScreenMode != "370px") {
+        var width = 583.0000000000001
+      } else {
+        var width = 400
+      }
+      var height = 353.685
 
       var layout = {
         font: { family: 'Helvetica', size: 14, color: '#000000' },
@@ -398,8 +403,8 @@ export default {
 
     EventBus.$on('Responsive', data => {
     this.WH = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.WH = data})
+
+    EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
 
     // reset the views
     EventBus.$on('resetViews', this.reset)

frontend/src/components/Heatmap.vue

@@ -36,6 +36,7 @@ export default {
       keyLocal: 0,
       activeModels: 0,
       flagLocal: false,
+      smallScreenMode: '0px'
     }
   },
   methods: {
@@ -228,9 +229,20 @@ export default {
                         })
 
     //==================================================
-    var viewerWidth = this.responsiveWidthHeight[0]*6.5
-    var viewerHeight = this.responsiveWidthHeight[1]*1.415
-    var viewerPosTop = viewerHeight * 0.1;
+    
+
+    if (this.smallScreenMode != "370px") {
+        var viewerWidth = this.responsiveWidthHeight[0]*6.5
+        var viewerHeight = this.responsiveWidthHeight[1]*1.25
+        var widthHeatmap = viewerWidth/2
+    } else {
+        var viewerWidth = this.responsiveWidthHeight[0]*6.5
+        var viewerHeight = this.responsiveWidthHeight[1]*1.14
+        var widthHeatmap = 600
+    }
+
+    var viewerPosTop = viewerHeight * 0.05;
+    var viewerPosTopHeat = viewerHeight * 0.15;
     var viewerPosLeft = viewerWidth*0.1;
 
     var legendElementWidth = cellSize * 3;
@@ -256,7 +268,7 @@ export default {
           .call(zoom)
             //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
             .append('svg:g')
-            .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")");
+            .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTopHeat + ")");
 
       svg.append('defs')
           .append('pattern')
@@ -445,7 +457,7 @@ export default {
       svgLeg.selectAll("*").remove();
         
       var svgLeg = d3.select("#LegendHeat").append("svg")
-        .attr("width", viewerWidth/2)
+        .attr("width", widthHeatmap)
         .attr("height", viewerHeight*0.13)
 
       var legend = svgLeg.append('g')
@@ -478,7 +490,7 @@ export default {
           })
           .attr("y", viewerPosTop + cellSize);
 
-      svgLeg.append("text").attr("x", 220).attr("y", 50).text("Importance (Normalized)").style("font-size", "16px").attr("alignment-baseline","top")
+      svgLeg.append("text").attr("x", 220).attr("y", 15).text("Importance (Normalized)").style("font-size", "16px").attr("alignment-baseline","top")
 
       //==================================================
       // Change ordering of cells
@@ -651,13 +663,12 @@ export default {
       EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; })
       EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)
 
-    EventBus.$on('Responsive', data => {
-    this.responsiveWidthHeight = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.responsiveWidthHeight = data})
+      EventBus.$on('Responsive', data => {
+      this.responsiveWidthHeight = data})
 
       // reset the views
       EventBus.$on('resetViews', this.reset)
+      EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
     }
 }
 </script>

frontend/src/components/Main.vue

@@ -4,10 +4,10 @@
 <body>
     <b-container fluid class="bv-example-row">
       <b-row class="md-3">
-        <b-col cols="3" >
+        <b-col cols="3">
           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center" style="background-color: #C0C0C0;">Data Sets and Performance Metrics Manager</mdb-card-header>
-              <mdb-card-body>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center collapsible" style="background-color: #C0C0C0;">Data Sets and Perform. Metrics Manager</mdb-card-header>
+              <mdb-card-body class="content">
                 <mdb-card-text class="text-left" style="font-size: 18.5px;">
                   <DataSetExecController/>
                   <SlidersController/>
@@ -17,16 +17,16 @@
         </b-col>
         <b-col cols="6">
           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center" style="background-color: #C0C0C0;">History of the Stacking Ensemble<small class="float-right"><knowledge/></small></mdb-card-header>
-            <mdb-card-body>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center collapsible" style="background-color: #C0C0C0;">History of the Stacking Ensemble<small class="float-right"><knowledge/></small></mdb-card-header>
+            <mdb-card-body class="content">
                 <Provenance/>
             </mdb-card-body>
           </mdb-card>
         </b-col>
         <b-col cols="3">
             <mdb-card>
-              <mdb-card-header color="primary-color" tag="h5" class="text-center" style="background-color: #C0C0C0;"><small class="float-left" style="padding-top: 3px;"><font-awesome-icon class="fa-lg" icon="dice-four"/>&nbsp;Metrics Support: [M1, M3-M5 (W)]</small>Metamodel's Performance</mdb-card-header>
-              <mdb-card-body>
+              <mdb-card-header color="primary-color" tag="h5" class="text-center collapsible" style="background-color: #C0C0C0;"><small class="float-left" style="padding-top: 3px;"><font-awesome-icon class="fa-lg" icon="dice-four"/>&nbsp;[M1, M3-M5 (W)]</small>Metamodel's Perform.</mdb-card-header>
+              <mdb-card-body class="content">
                 <FinalResultsLinePlot/>
               </mdb-card-body>
             </mdb-card>
@@ -67,7 +67,7 @@
           <b-row class="md-3">
             <b-col cols="3">
               <mdb-card style="margin-top: 15px">
-                <mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Parameters Manipulation for Each Algorithm</mdb-card-header>
+                <mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">[All]</small>Parameters Manipulation for Each Alg.</mdb-card-header>
                 <mdb-card-body>
                   <AlgorithmHyperParam/>
                 </mdb-card-body>
@@ -89,7 +89,7 @@
               <mdb-card style="margin-top: 15px;">
                   <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space<small class="float-right"><saveStack/></small></mdb-card-header>
                   <mdb-card-body>
-                    <mdb-card-text class="text-center" style="min-height: 822px">
+                    <mdb-card-text class="text-center" style="min-height: 710px">
                       <DataSpace/>
                       <PCPData/>
                     </mdb-card-text>
@@ -100,7 +100,7 @@
                 <mdb-card style="margin-top: 15px;">
                   <mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model<small class="float-right"><active/></small></mdb-card-header>
                     <mdb-card-body>
-                      <mdb-card-text class="text-center" style="min-height: 822px">
+                      <mdb-card-text class="text-center" style="min-height: 711px">
                         <ToggleSelection/>
                         <br/>
                         <Heatmap/>
@@ -118,7 +118,7 @@
                     [Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"><active-scatter/></small>
                     </mdb-card-header>
                     <mdb-card-body>
-                      <mdb-card-text class="text-center"  style="min-height: 822px">
+                      <mdb-card-text class="text-center"  style="min-height: 710px">
                         <ScatterPlot/>
                         <PerMetricBarChart/>
                       </mdb-card-text>
@@ -129,7 +129,7 @@
                 <mdb-card style="margin-top: 15px;">
                   <mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions' Space</mdb-card-header>
                   <mdb-card-body>
-                    <mdb-card-text class="text-center"  style="min-height: 822px">
+                    <mdb-card-text class="text-center"  style="min-height: 711px">
                       <PredictionsSpace/>
                       <BalancePredictions/>
                     </mdb-card-text>
@@ -139,6 +139,15 @@
             </b-row>
         </div>
       </div>
+      <div class="footer" style="margin-top: 0px">
+        <hr>
+         <p class="text-muted credit no-top-margin no-bottom-margin">
+             &copy; ISOVIS group 2020&ndash;2021
+         </p>
+         <p class="text-muted credit no-top-margin no-bottom-margin">
+             Last updated: November 12, 2020
+         </p>
+      </div>
     </b-container>
   <div class="w3-container">
     <div id="myModal" class="w3-modal" style="position: fixed;">
@@ -974,6 +983,7 @@ export default Vue.extend({
     },
   },
   created () {
+
     // does the browser support the Navigation Timing API?
     if (window.performance) {
         console.info("window.performance is supported");
@@ -986,6 +996,38 @@ export default Vue.extend({
     window.addEventListener('resize', this.change)
   },
   mounted() {
+    var coll = document.getElementsByClassName("collapsible");
+    var i;
+    var flagLocalMounted = true
+    var flagLocalSkip = true
+    EventBus.$on('OpenModal', data =>{ flagLocalSkip = false }) 
+    for (i = 0; i < coll.length; i++) {
+      coll[i].addEventListener("click", function() {
+        console.log(flagLocalSkip)
+        if (flagLocalSkip) {
+          var content = document.getElementsByClassName("content")
+          var value = "370px"
+          for (let j = 0; j < content.length; j++) {
+            if (content[j].style.display === "block") {
+              content[j].style.display = "none";
+            } else {
+              content[j].style.display = "block";
+              if (flagLocalMounted) {
+                content[j].style.display = "none";
+              }
+            }
+          }
+          flagLocalMounted = false
+          var combineWH = []
+          combineWH.push(this.width)
+          combineWH.push(this.height - 100)
+          EventBus.$emit('ResponsiveandAdapt', value)
+          EventBus.$emit('ResponsiveandChange', combineWH)
+          EventBus.$emit('ResponsiveandChange', combineWH)
+        }
+      flagLocalSkip = true
+      });
+    }
 
     this.Alg()
     var modal = document.getElementById('myModal')
@@ -1118,5 +1160,14 @@ hr {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+.collapsible {
+  cursor: pointer;
+}
+
+.content {
+  display: block;
+  overflow: hidden;
+}
+
 @import './../assets/w3.css';
 </style>

frontend/src/components/PCPData.vue

@@ -20,6 +20,7 @@ export default {
       colorsValues: ['#808000','#008080','#bebada','#fccde5','#d9d9d9','#bc80bd','#ccebc5'],
       ClassifierIDsListClearedData: [],
       RetrieveDataSet: 'HeartC',
+      smallScreenMode: '0px'
     }
   },
   methods: {
@@ -33,6 +34,14 @@ export default {
       const target_names = JSON.parse(this.PCPDataReceived[3])
       const target_names_original = JSON.parse(this.PCPDataReceived[4])
 
+      if (this.smallScreenMode != "370px") {
+        var width = 1200
+        var height = 248
+      } else {
+        var width = 800
+        var height = 251
+      }
+
       var extraction = []
       for (let i = 0; i < DataSetParse.length; i++) {
         if (this.RetrieveDataSet == 'IrisC') {
@@ -55,8 +64,8 @@ export default {
       if (DataSetParse.length == this.ClassifierIDsListClearedData.length || this.ClassifierIDsListClearedData.length == 0) {
         var pc = ParCoords()("#PCPDataView")
             .data(DataSetParse)
-            .width(1200)
-            .height(272)
+            .width(width)
+            .height(height)
             .hideAxis(["Outcome","ID"])
             .color(function(d, i) { return colors[d.Outcome] })
             .bundlingStrength(0) // set bundling strength
@@ -70,8 +79,8 @@ export default {
       else {
         var pc = ParCoords()("#PCPDataView")
           .data(DataSetParse)
-          .width(1200)
-          .height(272)
+          .width(width)
+          .height(height)
           .hideAxis(["Outcome","ID"])
           .color(function(d, i) { return colors[d.Outcome] })
           .bundlingStrength(0) // set bundling strength
@@ -107,6 +116,8 @@ export default {
     EventBus.$on('resetViews', this.reset)
 
     EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveDataSet = data })
+
+    EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
   }
 }
 </script>

frontend/src/components/Parameters.vue

@@ -93,7 +93,7 @@ export default {
       legendPosition: {x: 20, y: 20}, // the position of the legend, from the top-left corner of the svg
       levels: 3,				//How many levels or inner circles should there be drawn
       maxValue: 0, 				//What is the value that the biggest circle will represent
-      labelFactor: 1.25, 			//How much farther than the radius of the outer circle should the labels be placed
+      labelFactor: 1.32, 			//How much farther than the radius of the outer circle should the labels be placed
       wrapWidth: 60, 			//The number of pixels after which a label needs to be given a new line
       opacityArea: 0.35, 			//The opacity of the area of the blob
       dotRadius: 2, 				//The size of the colored circles of each blog
@@ -634,8 +634,8 @@ export default {
     ////////////////////////////////////////////////////////////// 
 
       var margin = {top: 50, right: 120, bottom: 55, left: 65},
-        legendPosition = {x: 425, y: 25},
-				width = Math.min(520, window.innerWidth - 10) - margin.left - margin.right,
+        legendPosition = {x: 320, y: 25},
+				width = Math.min(406, window.innerWidth - 10) - margin.left - margin.right,
         height = Math.min(width + 12, window.innerHeight + 12 - margin.top - margin.bottom);
         
 			////////////////////////////////////////////////////////////// 
@@ -752,8 +752,10 @@ export default {
 
     EventBus.$on('Responsive', data => {
     this.WH = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.WH = data})
+    EventBus.$on('ResponsiveandAdapt', data => {
+      document.getElementById('overview').style.height = data 
+      document.getElementById('overview').style.marginTop = "35px" 
+    })
 
     // reset the views
     EventBus.$on('resetViews', this.reset)
@@ -841,6 +843,6 @@ export default {
 }
 
 #overview {
-  min-height: 450px;
+  min-height: 336px;
 }
 </style>

frontend/src/components/PerMetricBarChart.vue

@@ -21,6 +21,7 @@ export default {
       ,0,0,1,0,0
       ,0,1,1,1
       ],
+      smallScreenMode: '0px',
     }
   },
   methods: {
@@ -84,90 +85,98 @@ export default {
           }
         }
       }
-      var width = this.WH[0]*6.5 // interactive visualization
-      var height = this.WH[1]*0.482 // interactive visualization
-          var trace1 = {
-          x: x,
-          y: perModelAllClear, 
-          name: 'All Points', 
-          type: 'box',
-          boxmean: true,
-          marker: {
-              color: 'rgb(0,0,0)'
+
+
+      if (this.smallScreenMode != "370px") {
+        var width = this.WH[0]*6.5 // interactive visualization
+        var height = this.WH[1]*0.482 // interactive visualization
+      } else {
+        var width = this.WH[0]*6.8
+        var height = this.WH[1]*0.38
+      }
+
+        var trace1 = {
+        x: x,
+        y: perModelAllClear, 
+        name: 'All Points', 
+        type: 'box',
+        boxmean: true,
+        marker: {
+            color: 'rgb(0,0,0)'
+        }
+        };
+        var trace2 = {
+        x: x,
+        y: perModelSelectedClear, 
+        name: 'Selected Points', 
+        type: 'box',
+        boxmean: true,
+        marker: {
+            color: 'rgb(211,211,211)'
+        }
+        };
+        var data = [trace1, trace2];
+        var layout = {
+        font: { family: 'Helvetica', size: 14, color: '#000000' },
+        boxmode: 'group',
+        autosize: true,
+        width:  width,
+        height: height,
+        hovermode: 'x',
+        margin: {
+          l: 50,
+          r: 0,
+          b: 35,
+          t: 40,
+          pad: 0
+        },
+        xaxis: {
+            title: 'Performance Metrics',
+            titlefont: {
+            size: 16,
+            color: 'black'
+            }},
+        yaxis: {
+            title: '# Performance (%) #',
+            titlefont: {
+            size: 16,
+            color: 'black'
+            }}};
+        var boxPlot = document.getElementById('PerMetricBar');
+        var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
+        Plotly.newPlot(boxPlot, data, layout, config);
+
+        boxPlot.on('plotly_click', (eventData) => {
+          var xAxisHovered
+          xAxisHovered = eventData.points[0].x
+          var index
+          if (xAxisHovered == 'Accuracy') {
+            index = 0
           }
-          };
-          var trace2 = {
-          x: x,
-          y: perModelSelectedClear, 
-          name: 'Selected Points', 
-          type: 'box',
-          boxmean: true,
-          marker: {
-              color: 'rgb(211,211,211)'
+          else if (xAxisHovered == 'G-Mean') {
+            index = 1
           }
-          };
-          var data = [trace1, trace2];
-          var layout = {
-          font: { family: 'Helvetica', size: 14, color: '#000000' },
-          boxmode: 'group',
-          autosize: true,
-          width:  width,
-          height: height,
-          hovermode: 'x',
-          margin: {
-            l: 50,
-            r: 0,
-            b: 35,
-            t: 40,
-            pad: 0
-          },
-          xaxis: {
-              title: 'Performance Metrics',
-              titlefont: {
-              size: 16,
-              color: 'black'
-              }},
-          yaxis: {
-              title: '# Performance (%) #',
-              titlefont: {
-              size: 16,
-              color: 'black'
-              }}};
-          var boxPlot = document.getElementById('PerMetricBar');
-          var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
-          Plotly.newPlot(boxPlot, data, layout, config);
-
-          boxPlot.on('plotly_click', (eventData) => {
-            var xAxisHovered
-            xAxisHovered = eventData.points[0].x
-            var index
-            if (xAxisHovered == 'Accuracy') {
-              index = 0
-            }
-            else if (xAxisHovered == 'G-Mean') {
-              index = 1
-            }
-            else if (xAxisHovered == 'Precision') {
-              index = 2
-            }
-            else if (xAxisHovered == 'Recall') {
-              index = 3
-            }
-            else if (xAxisHovered == 'F-Beta Score') {
-              index = 4
-            }
-            else if (xAxisHovered == 'MCC') {
-              index = 5
-            }
-            else if (xAxisHovered == 'ROC AUC') {
-              index = 6
-            }
-            else {
-              index = 7
-            }
-            EventBus.$emit('updateBold', xAxisHovered)
-            EventBus.$emit('updateMetricsScatter', resultsColors[index])
-          });
+          else if (xAxisHovered == 'Precision') {
+            index = 2
+          }
+          else if (xAxisHovered == 'Recall') {
+            index = 3
+          }
+          else if (xAxisHovered == 'F-Beta Score') {
+            index = 4
+          }
+          else if (xAxisHovered == 'MCC') {
+            index = 5
+          }
+          else if (xAxisHovered == 'ROC AUC') {
+            index = 6
+          }
+          else {
+            index = 7
+          }
+          EventBus.$emit('updateBold', xAxisHovered)
+          EventBus.$emit('updateMetricsScatter', resultsColors[index])
+        });
       },
       reset () {
         Plotly.purge('PerMetricBar')
@@ -186,8 +195,8 @@ export default {
 
       EventBus.$on('Responsive', data => {
       this.WH = data})
-      EventBus.$on('ResponsiveandChange', data => {
-      this.WH = data})
+
+      EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
 
       EventBus.$on('UpdateBarChartperMetric', data => {
       this.SelBarChartMetrics = data})

frontend/src/components/PredictionsSpace.vue

@@ -30,6 +30,7 @@ export default {
       colorsValues: ['#808000','#008080','#bebada','#fccde5','#d9d9d9','#bc80bd','#ccebc5'],
       WH: [],
       onlyOnce: true,
+      smallScreenMode: '0px',
     }
   },
   methods: {
@@ -53,9 +54,14 @@ export default {
     ScatterPlotPredView () {
       Plotly.purge('OverviewPredPlotly')
 
-      // responsive visualization
-      var width = this.WH[0]*6.5 // interactive visualization
-      var height = this.WH[1]*1.185 // interactive visualization
+      if (this.smallScreenMode != "370px") {
+        var width = this.WH[0]*6.5 // interactive visualization
+        var height = this.WH[1]*0.98 // interactive visualization
+      } else {
+        var width = this.WH[0]*6.6 // interactive visualization
+        var height = this.WH[1]*0.95 // interactive visualization
+      }
+
       var XandYCoordinatesMDS
       var target_names = JSON.parse(this.PredictionsData[4])
       if (this.UpdatedData.length != 0) {
@@ -74,7 +80,6 @@ export default {
         stringParameters.push(JSON.stringify(DataSetParse[i]).replace(/,/gi, '<br>'))
       }
       const XandYCoordinatesTSNE = JSON.parse(this.PredictionsData[18])
-      console.log(XandYCoordinatesTSNE)
       const XandYCoordinatesUMAP= JSON.parse(this.PredictionsData[19])
 
       var result = [];
@@ -330,7 +335,6 @@ export default {
       OverviewPlotly.on('plotly_selected', function (evt) {
         if (typeof evt !== 'undefined') {
           const DataPoints = []
-          console.log(evt)
           for (let i = 0; evt.points.length; i++) {
             if (evt.points[i] === undefined) {
               break
@@ -339,7 +343,6 @@ export default {
               DataPoints.push(OnlyId[3])
             }
           }
-          console.log(DataPoints)
           if (DataPoints != '') {
             EventBus.$emit('SendSelectedDataPointsToServerEvent', DataPoints)
           } else {
@@ -358,8 +361,8 @@ export default {
     EventBus.$on('emittedEventCallingPredictionsSpacePlotView', this.ScatterPlotPredView)
     EventBus.$on('Responsive', data => {
     this.WH = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.WH = data})
+
+    EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
 
     EventBus.$on('RepresentationSelectionPred', data => {this.representationDef = data})
     EventBus.$on('RepresentationSelectionPred', this.ScatterPlotPredView)

frontend/src/components/Provenance.vue

@@ -78,8 +78,8 @@ export default {
     },
     provenance () {
       var canvas = document.getElementById("main-canvas");
-      var width = this.WH[0]*6.52 // interactive visualization
-      var height = this.WH[1]*0.375 // interactive visualization
+      var width = 1195.3333333333333
+      var height = 173.375
 
       var flagKNN = 0
       var flagSVC = 0
@@ -526,8 +526,6 @@ export default {
 
     EventBus.$on('Responsive', data => {
     this.WH = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.WH = data})
 
     // reset the views
     EventBus.$on('resetViews', this.reset)

frontend/src/components/ScatterPlot.vue

@@ -63,7 +63,8 @@ export default {
       keyLocal: 0,
       activeModels: 0,
       pushModelsRemaining: [],
-      onlyOnce: true
+      onlyOnce: true,
+      smallScreenMode: '0px',
     }
   },
   methods: {
@@ -234,7 +235,6 @@ export default {
           //this.TSNEStore.push(TSNEData)
           this.modelIDStore.push(modelId)
           this.UMAPStore.push(UMAPData)
-          console.log('mpike5')
           colorsforScatterPlot = this.colorsStore.slice(this.activeModels,this.activeModels+1)[0]
           MDSData = this.MDSStore.slice(this.activeModels,this.activeModels+1)[0]
           parameters = this.parametersStore.slice(this.activeModels,this.activeModels+1)[0]
@@ -251,8 +251,6 @@ export default {
         EventBus.$emit('NewHeatmapAccordingtoNewStack', modelId)
 
       }
-      console.log(this.colorsStore)
-      console.log(this.MDSStore)
       var DataGeneral
 
       var maxX
@@ -260,8 +258,13 @@ export default {
       var maxY
       var minY
 
-      var width = this.WH[0]*6.5 // interactive visualization
-      var height = this.WH[1]*1.192 // interactive visualization
+      if (this.smallScreenMode != "370px") {
+        var width = this.WH[0]*6.6 // interactive visualization
+        var height = this.WH[1]*0.98 // interactive visualization
+      } else {
+        var width = this.WH[0]*7 // interactive visualization
+        var height = this.WH[1]*0.95 // interactive visualization
+      }
 
       var layout
       if (this.representationDef == 'mds') {
@@ -548,10 +551,11 @@ export default {
     EventBus.$on('emittedEventCallingScatterPlot', this.ScatterPlotView)
     EventBus.$on('getColors', data => {
       this.colorsforOver = data})
+
     EventBus.$on('Responsive', data => {
     this.WH = data})
-    EventBus.$on('ResponsiveandChange', data => {
-    this.WH = data})
+    EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
+
     EventBus.$on('ParametersAll',  data => { this.parametersAll = data })
     EventBus.$on('getColors', this.UpdateScatter)
     EventBus.$on('RepresentationSelection', data => {this.representationDef = data})

frontend/src/components/SlidersController.vue

@@ -54,14 +54,14 @@
 </b-row>
 <b-row>
     <b-col cols="6">
-        <p>(*) Average: <select id="selectFilterAverage" @change="selectAppliedFilterAverage()">
-        <option value="weighted" selected>Weighted (W)</option>
+        <p>(*) Aver.: <select id="selectFilterAverage" @change="selectAppliedFilterAverage()">
+        <option value="weighted" selected>Weighted</option>
         <option value="micro">Micro</option>
         <option value="macro">Macro</option>
       </select></p>
     </b-col>
     <b-col cols="6">
-        <p>Detailed Feature Search: <input type="checkbox" id="toggleDeepID" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"></p>
+        <p>Feat. Search: <input type="checkbox" id="toggleDeepID" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"></p>
     </b-col>
 </b-row>
 </div>
@@ -243,6 +243,21 @@
           },
         },
         mounted () {
+          EventBus.$on('Responsive', data => {
+
+            this.WH = data
+            var myClasses = document.getElementsByClassName('slider slider-horizontal')
+
+            for(var i = 0; i < myClasses.length; i++){
+              if (this.WH[0] > 125) {
+                myClasses[i].style.width = "260px"; // or
+              }
+              else {
+                myClasses[i].style.width = "60px"; // depending on what you're doing
+              }
+            }
+          })
+
           $('#toggleDeepID').bootstrapToggle({
             on: 'On',
             off: 'Off',
@@ -266,8 +281,12 @@ p {
     padding: 0 !important;
 }
 
-.slider.slider-horizontal{
-  width:260px; /* sample value - set it as you like*/
+.toggle-on.btn-sm {
+  padding-right: 20px
+}
+
+.toggle-off.btn-sm {
+  padding-right: 0px
 }
 
 .slider-handle {

frontend/src/components/ToggleSelection.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="toggles" style="visibility:hidden">
-        Univariate Feature Selection:&nbsp;<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">&nbsp;&nbsp;&nbsp;
-        Permutation Feature Importance:&nbsp;<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">&nbsp;&nbsp;&nbsp;
-        Accuracy Feature Importance:&nbsp;<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
+        Univariate FS:&nbsp;<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">&nbsp;&nbsp;&nbsp;
+        Permutation FI:&nbsp;<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">&nbsp;&nbsp;&nbsp;
+        Accuracy FI:&nbsp;<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
     </div>
 </template>
 
@@ -40,8 +40,8 @@ export default {
 
     EventBus.$on('resetToggles', this.ResetPosition)
     $('#toggle-uni').bootstrapToggle({
-        on: 'Enabled',
-        off: 'Disabled',
+        on: 'On',
+        off: 'Off',
         width: '8%',
     });
     $('#toggle-uni').change(function() {
@@ -55,8 +55,8 @@ export default {
         }
     })
     $('#toggle-per').bootstrapToggle({
-        on: 'Enabled',
-        off: 'Disabled',
+        on: 'On',
+        off: 'Off',
         width: '8%',
     });
     $('#toggle-per').change(function() {
@@ -70,8 +70,8 @@ export default {
         }
     })
     $('#toggle-fi').bootstrapToggle({
-        on: 'Enabled',
-        off: 'Disabled',
+        on: 'On',
+        off: 'Off',
         width: '8%',
     });
     $('#toggle-fi').change(function() {