ISOVIS
/
StackGenVis
10
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

responsive

Browse Source
master responsiveness
Angelos Chatzimparmpas 4 years ago
parent f521a3509d
commit f25ea1a37e
17 changed files with 329 additions and 205 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      README.md
  2. 8
      frontend/src/components/Algorithms.vue
  3. 27
      frontend/src/components/BalancePredictions.vue
  4. 3
      frontend/src/components/BarChart.vue
  5. 8
      frontend/src/components/DataSetExecController.vue
  6. 20
      frontend/src/components/DataSpace.vue
  7. 49
      frontend/src/components/FinalResultsLinePlot.vue
  8. 25
      frontend/src/components/Heatmap.vue
  9. 75
      frontend/src/components/Main.vue
  10. 19
      frontend/src/components/PCPData.vue
  11. 14
      frontend/src/components/Parameters.vue
  12. 13
      frontend/src/components/PerMetricBarChart.vue
  13. 17
      frontend/src/components/PredictionsSpace.vue
  14. 6
      frontend/src/components/Provenance.vue
  15. 20
      frontend/src/components/ScatterPlot.vue
  16. 29
      frontend/src/components/SlidersController.vue
  17. 18
      frontend/src/components/ToggleSelection.vue

3
README.md
Unescape View File

@ -1,9 +1,10 @@
# StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics # 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) [![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). 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. **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.

8
frontend/src/components/Algorithms.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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> </div>
</template> </template>
@ -342,7 +342,7 @@ export default {
// label : displayed text in toolbox // label : displayed text in toolbox
this.chart = exploding_boxplot(data, {y:'# Performance (%) #',group:'Algorithm',color:'Algorithm',label:'Model'}) 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.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 //call chart on a div
this.chart('#exploding_boxplot') this.chart('#exploding_boxplot')
@ -1073,7 +1073,7 @@ export default {
$(el)[8].dispatchEvent(new Event('click')) $(el)[8].dispatchEvent(new Event('click'))
} else if (this.selectedAlgorithm == 'AdaB') { } else if (this.selectedAlgorithm == 'AdaB') {
$(el)[9].dispatchEvent(new Event('click')) $(el)[9].dispatchEvent(new Event('click'))
} else { } else if (this.selectedAlgorithm == 'GradB') {
$(el)[10].dispatchEvent(new Event('click')) $(el)[10].dispatchEvent(new Event('click'))
} }
} }
@ -1093,8 +1093,8 @@ export default {
this.WH = data}) this.WH = data})
EventBus.$on('ResponsiveandChange', data => { EventBus.$on('ResponsiveandChange', data => {
this.WH = data}) this.WH = data})
EventBus.$on('ResponsiveandChange', this.boxplot)
EventBus.$on('ResponsiveandChange', this.previousBoxPlotState) EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
EventBus.$on('ResponsiveandChange', this.brushed)
EventBus.$on('emittedEventCallingSelectedALgorithm', data => { EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
this.selectedAlgorithm = data}) this.selectedAlgorithm = data})
EventBus.$on('brusheAllOn', this.brushActivationAll) EventBus.$on('brusheAllOn', this.brushActivationAll)

27
frontend/src/components/BalancePredictions.vue
Unescape View File

@ -18,7 +18,8 @@
return { return {
resultsfromOverview: '', resultsfromOverview: '',
newResultsFromSelection: '', newResultsFromSelection: '',
responsiveWidthHeight: [] responsiveWidthHeight: [],
smallScreenMode: '0px',
} }
}, },
methods: { methods: {
@ -31,9 +32,17 @@
var svg = d3.select("#my_dataviz"); var svg = d3.select("#my_dataviz");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
// responsive visualizations if (this.smallScreenMode != "370px") {
var widthInitial = this.responsiveWidthHeight[0]*6.5 var widthInitial = this.responsiveWidthHeight[0]*6.5
var heightInitial = this.responsiveWidthHeight[1]*0.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 performancePerModel = JSON.parse(this.resultsfromOverview[0])
var performancePerModelSelection = [] var performancePerModelSelection = []
@ -186,12 +195,11 @@
// Handmade legend // Handmade legend
var heightforText = 215 svg.append("circle").attr("cx", widthforText).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#000")
svg.append("circle").attr("cx", 215).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("circle").attr("cx", 785).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", 230).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", 515).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("x", 800).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"); 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 // Function to compute density
@ -216,8 +224,7 @@
EventBus.$on('UpdateBalanceView', this.Balance) EventBus.$on('UpdateBalanceView', this.Balance)
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.responsiveWidthHeight = data}) this.responsiveWidthHeight = data})
EventBus.$on('ResponsiveandChange', data => { EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
this.responsiveWidthHeight = data})
// reset view // reset view
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)

3
frontend/src/components/BarChart.vue
Unescape View File

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

8
frontend/src/components/DataSetExecController.vue
Unescape View File

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

20
frontend/src/components/DataSpace.vue
Unescape View File

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

49
frontend/src/components/FinalResultsLinePlot.vue
Unescape View File

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

25
frontend/src/components/Heatmap.vue
Unescape View File

@ -36,6 +36,7 @@ export default {
keyLocal: 0, keyLocal: 0,
activeModels: 0, activeModels: 0,
flagLocal: false, flagLocal: false,
smallScreenMode: '0px'
} }
}, },
methods: { methods: {
@ -228,9 +229,20 @@ export default {
}) })
//================================================== //==================================================
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 viewerWidth = this.responsiveWidthHeight[0]*6.5
var viewerHeight = this.responsiveWidthHeight[1]*1.415 var viewerHeight = this.responsiveWidthHeight[1]*1.14
var viewerPosTop = viewerHeight * 0.1; var widthHeatmap = 600
}
var viewerPosTop = viewerHeight * 0.05;
var viewerPosTopHeat = viewerHeight * 0.15;
var viewerPosLeft = viewerWidth*0.1; var viewerPosLeft = viewerWidth*0.1;
var legendElementWidth = cellSize * 3; var legendElementWidth = cellSize * 3;
@ -256,7 +268,7 @@ export default {
.call(zoom) .call(zoom)
//.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
.append('svg:g') .append('svg:g')
.attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")"); .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTopHeat + ")");
svg.append('defs') svg.append('defs')
.append('pattern') .append('pattern')
@ -445,7 +457,7 @@ export default {
svgLeg.selectAll("*").remove(); svgLeg.selectAll("*").remove();
var svgLeg = d3.select("#LegendHeat").append("svg") var svgLeg = d3.select("#LegendHeat").append("svg")
.attr("width", viewerWidth/2) .attr("width", widthHeatmap)
.attr("height", viewerHeight*0.13) .attr("height", viewerHeight*0.13)
var legend = svgLeg.append('g') var legend = svgLeg.append('g')
@ -478,7 +490,7 @@ export default {
}) })
.attr("y", viewerPosTop + cellSize); .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 // Change ordering of cells
@ -652,12 +664,11 @@ export default {
EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush) EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.responsiveWidthHeight = data})
EventBus.$on('ResponsiveandChange', data => {
this.responsiveWidthHeight = data}) this.responsiveWidthHeight = data})
// reset the views // reset the views
EventBus.$on('resetViews', this.reset) EventBus.$on('resetViews', this.reset)
EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
} }
} }
</script> </script>

75
frontend/src/components/Main.vue
Unescape View File

@ -4,10 +4,10 @@
<body> <body>
<b-container fluid class="bv-example-row"> <b-container fluid class="bv-example-row">
<b-row class="md-3"> <b-row class="md-3">
<b-col cols="3" > <b-col cols="3">
<mdb-card> <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-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> <mdb-card-body class="content">
<mdb-card-text class="text-left" style="font-size: 18.5px;"> <mdb-card-text class="text-left" style="font-size: 18.5px;">
<DataSetExecController/> <DataSetExecController/>
<SlidersController/> <SlidersController/>
@ -17,16 +17,16 @@
</b-col> </b-col>
<b-col cols="6"> <b-col cols="6">
<mdb-card> <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-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> <mdb-card-body class="content">
<Provenance/> <Provenance/>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
</b-col> </b-col>
<b-col cols="3"> <b-col cols="3">
<mdb-card> <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-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> <mdb-card-body class="content">
<FinalResultsLinePlot/> <FinalResultsLinePlot/>
</mdb-card-body> </mdb-card-body>
</mdb-card> </mdb-card>
@ -67,7 +67,7 @@
<b-row class="md-3"> <b-row class="md-3">
<b-col cols="3"> <b-col cols="3">
<mdb-card style="margin-top: 15px"> <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> <mdb-card-body>
<AlgorithmHyperParam/> <AlgorithmHyperParam/>
</mdb-card-body> </mdb-card-body>
@ -89,7 +89,7 @@
<mdb-card style="margin-top: 15px;"> <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-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-body>
<mdb-card-text class="text-center" style="min-height: 822px"> <mdb-card-text class="text-center" style="min-height: 710px">
<DataSpace/> <DataSpace/>
<PCPData/> <PCPData/>
</mdb-card-text> </mdb-card-text>
@ -100,7 +100,7 @@
<mdb-card style="margin-top: 15px;"> <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-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-body>
<mdb-card-text class="text-center" style="min-height: 822px"> <mdb-card-text class="text-center" style="min-height: 711px">
<ToggleSelection/> <ToggleSelection/>
<br/> <br/>
<Heatmap/> <Heatmap/>
@ -118,7 +118,7 @@
[Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"><active-scatter/></small> [Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"><active-scatter/></small>
</mdb-card-header> </mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 822px"> <mdb-card-text class="text-center" style="min-height: 710px">
<ScatterPlot/> <ScatterPlot/>
<PerMetricBarChart/> <PerMetricBarChart/>
</mdb-card-text> </mdb-card-text>
@ -129,7 +129,7 @@
<mdb-card style="margin-top: 15px;"> <mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions' Space</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions' Space</mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 822px"> <mdb-card-text class="text-center" style="min-height: 711px">
<PredictionsSpace/> <PredictionsSpace/>
<BalancePredictions/> <BalancePredictions/>
</mdb-card-text> </mdb-card-text>
@ -139,6 +139,15 @@
</b-row> </b-row>
</div> </div>
</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> </b-container>
<div class="w3-container"> <div class="w3-container">
<div id="myModal" class="w3-modal" style="position: fixed;"> <div id="myModal" class="w3-modal" style="position: fixed;">
@ -974,6 +983,7 @@ export default Vue.extend({
}, },
}, },
created () { created () {
// does the browser support the Navigation Timing API? // does the browser support the Navigation Timing API?
if (window.performance) { if (window.performance) {
console.info("window.performance is supported"); console.info("window.performance is supported");
@ -986,6 +996,38 @@ export default Vue.extend({
window.addEventListener('resize', this.change) window.addEventListener('resize', this.change)
}, },
mounted() { 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() this.Alg()
var modal = document.getElementById('myModal') var modal = document.getElementById('myModal')
@ -1118,5 +1160,14 @@ hr {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
} }
.collapsible {
cursor: pointer;
}
.content {
display: block;
overflow: hidden;
}
@import './../assets/w3.css'; @import './../assets/w3.css';
</style> </style>

19
frontend/src/components/PCPData.vue
Unescape View File

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

14
frontend/src/components/Parameters.vue
Unescape View File

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

13
frontend/src/components/PerMetricBarChart.vue
Unescape View File

@ -21,6 +21,7 @@ export default {
,0,0,1,0,0 ,0,0,1,0,0
,0,1,1,1 ,0,1,1,1
], ],
smallScreenMode: '0px',
} }
}, },
methods: { methods: {
@ -84,8 +85,16 @@ export default {
} }
} }
} }
if (this.smallScreenMode != "370px") {
var width = this.WH[0]*6.5 // interactive visualization var width = this.WH[0]*6.5 // interactive visualization
var height = this.WH[1]*0.482 // 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 = { var trace1 = {
x: x, x: x,
y: perModelAllClear, y: perModelAllClear,
@ -186,8 +195,8 @@ export default {
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.WH = data}) this.WH = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data}) EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
EventBus.$on('UpdateBarChartperMetric', data => { EventBus.$on('UpdateBarChartperMetric', data => {
this.SelBarChartMetrics = data}) this.SelBarChartMetrics = data})

17
frontend/src/components/PredictionsSpace.vue
Unescape View File

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

6
frontend/src/components/Provenance.vue
Unescape View File

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

20
frontend/src/components/ScatterPlot.vue
Unescape View File

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

29
frontend/src/components/SlidersController.vue
Unescape View File

@ -54,14 +54,14 @@
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="6"> <b-col cols="6">
<p>(*) Average: <select id="selectFilterAverage" @change="selectAppliedFilterAverage()"> <p>(*) Aver.: <select id="selectFilterAverage" @change="selectAppliedFilterAverage()">
<option value="weighted" selected>Weighted (W)</option> <option value="weighted" selected>Weighted</option>
<option value="micro">Micro</option> <option value="micro">Micro</option>
<option value="macro">Macro</option> <option value="macro">Macro</option>
</select></p> </select></p>
</b-col> </b-col>
<b-col cols="6"> <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-col>
</b-row> </b-row>
</div> </div>
@ -243,6 +243,21 @@
}, },
}, },
mounted () { 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({ $('#toggleDeepID').bootstrapToggle({
on: 'On', on: 'On',
off: 'Off', off: 'Off',
@ -266,8 +281,12 @@ p {
padding: 0 !important; padding: 0 !important;
} }
.slider.slider-horizontal{ .toggle-on.btn-sm {
width:260px; /* sample value - set it as you like*/ padding-right: 20px
}
.toggle-off.btn-sm {
padding-right: 0px
} }
.slider-handle { .slider-handle {

18
frontend/src/components/ToggleSelection.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save